位置距离折腾的小demo测试 - 移动端

一、HTML代码

<div id="Test" onclick="handleClick()" style="background-color: pink;"></div>

二、CSS代码

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#Test {
  border: 10px solid red;
  padding: 20px;
  margin: 30px;
  width: 100px;
  height: 60px;
  position: relative;
  overflow: auto;
}

margin-top解决方案：

子元素margin-top，导致父元素跟随出现margin-top解决方案：

1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 
2、为父元素添加overflow：hidden；样式即可（完美） 
3、为父元素或者子元素声明浮动（float：left；可用） 
4、为父元素添加border（border:1px solid transparent可用） 
5、为父元素或者子元素声明绝对定位

效果展示：

三、获取DOM

let myDom = document.getElementById('Test')

四、监听touchstart事件

这里之前用了箭头函数，因为箭头函数指向当前函数的上下文关系，所以this指向了window，所以放弃了箭头函数，使用了匿名函数

// 声明全局的变量来使用，因为是直接在js中写的，所以不用去弄ts规则，否则还会报错
let startX,startY => // 声明触摸点开始坐标位置
let endX,endY => // 声明触摸滑动结束点坐标
let X,Y => // 声明myDom初始上左偏移值
let x,y => // 声明myDom上左偏移量
let stepX,stepY => // 声明每次点击的时候元素的offsetLeft&offsetTop值
myDom.addEventListener('touchstart', function (e) => {
    e = event || window.event
    console.log(e, this) => // 打印结果：touch事件对象，myDom元素
    // 获取触摸点开始坐标位置
    // clientX&clientY是指点击点的坐标距离当前窗口可视区域左上角(0,0)的X轴和Y轴的距离
    startX = e.touches[0].clientX => // 因为有margin，初始值为30，后面判断有用
    startY = e.touches[0].clientY => // 因为有margin，初始值为30
    // 获取myDom初始上左偏移值，技术有限，也不想过于计算，所以建议千万不要再css里面设置left,top值，否则下面的方法是获取不到的
    // 当然如果不怕麻烦，我觉得可行的一个方法就是通过获取offsetLeft减去margin-left值就是初始偏移了，这个是针对我这个测试demo而言，具体情况还是看设计
    // 下面这个是短路运算
    // A || B => 取真，如果A为真，就获取A,否则读取B，如果B为真，就获取B，只要有一项为真，就立即返回，不再判断后面，以此类推，如果都没有真，默认最后一项为真
    // A && B => 取假，如果A为真，就继续判断B，如果B为真，则以此类推继续，只要有一项为假，就立即返回，不再判断后面，如果都没有假，默认最后一项为假
    X = parseInt(this.style.left) || 0
    Y = parseInt(this.style.top) || 0
})

五、监听touchmove事件

myDom.addEventListener('touchmove', function (e) {
    e = event || window.event
    // 获取触摸滑动结束点坐标
    endX = e.touches[0].clientX
    endY = e.touches[0].clientY
    // 获取元素的距离父元素上左距离
    stepX = this.offsetLeft
    stepY = this.offsetTop
})

六、监听touchend事件

myDom.addEventListener('touchend', function (e) {
    e = event || window.event
    // 就算滑动的距离
    x = endX - startX
    y = endY - startY
    // 判断滑动距离是否大于myDom距离可视区域上左距离，让跟随滑动元素不能超出可视区域
    if (x<0 && Math.abs(x) >= 30) {
        x = -30
    }
    if (y<0 && Math.abs(y) >= 30) {
        y = -30
    }
    // 计算最终的偏移量
    let PX = X + x
    let PY = Y + y
    // 赋值元素便宜
    this.style.left = PX + 'px'
    this.style.top = PY + 'px'
})

效果图：刚好到右上角，出不去

七、右移动

// 继续，刚才我们只考虑了左移的情况，现在我们要考虑右移的情况，继续回到touchend
myDom.addEventListener('touchend', function (e) {
    e = event || window.event
    // 就算滑动的距离
    x = endX - startX
    y = endY - startY
    // 获取window视口可视区域大小
    let WW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    let WH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    console.log(WW, WH) => 375 667
    // 获取元素自身的真是大小
    let OW = this.offsetWidth
    let OH = this.offsetHeight
    console.log(OW,OH) => 160 120
    // 计算元素的最大XY偏移量
    let MaxX = WW - OW
    let MaxY = WH - OH
    // 获取元素距离最近定位父元素的上左距离
    let FT = this.offsetTop
    let FL = this.offsetLeft
    // 判断滑动距离是否大于myDom距离可视区域上左距离，让跟随滑动元素不能超出可视区域
    if (x<0 && Math.abs(x) >= 30) {
        x = -30
    }
    if (y<0 && Math.abs(y) >= 30) {
        y = -30
    }
    // 计算最终的偏移量
    let PX = X + x
    let PY = Y + y
    // 赋值元素便宜
    this.style.left = PX + 'px'
    this.style.top = PY + 'px'
})

后面逻辑写不下去了...，求大佬指导。