移动端怎么实现盒子拖拽效果？

勤掘努君

已于 2023-08-16 11:30:58 修改

阅读量514

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2023-03-27 15:32:31 首次发布

本文链接：https://blog.youkuaiyun.com/twk857857/article/details/129794984

版权

在移动端，由于不能使用鼠标事件，因此需要用手指事件（ontouchstart,ontouchmove,ontouchend）来实现盒子拖拽功能。通过获取手指按下的位置和盒子的偏移量，动态改变盒子的left和top样式，限制其在页面内的移动范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道在写PC端页面时，可以用原生js写出可以拖拽的盒子，但是用同样的方法，再写移动端时，就不生效了。到底是怎么回事呢？今天我来给大家说说

因为在移动端不能使用鼠标按下、鼠标移动、鼠标抬起事件，而应该使用手指按下事件(ontouchstart)、手指移动事件(ontouchmove)、手指抬起事件(ontouchend)

具体实现js代码

// 先获取到dom节点
const dream = document.getElementsByClassName("box")[0]

// 给dom节点加一个手指按下事件
dream.ontouchstart = function (ev) {
    // 计算出当前手指按下的位置距离这个盒子最左侧的距离disX
    let disX = ev.touches[0].clientX - dream.offsetLeft
    // 计算出当前手指按下的位置距离这个盒子最顶端的距离disY
    let disY = ev.touches[0].clientY - dream.offsetTop

    // 给document对象加一个手指移动事件
    document.ontouchmove = function (ev) {
        // ev.touches[0].clientX - disX可以计算出当前这个盒子左侧边与页面左侧的距离
        // 判断它要是小于等于0的时候，就让与页面左侧位置持平，不能让它去页面外面
        if (ev.touches[0].clientX - disX <= 0) {
            dream.style.left = 0 + "px"
            return false
        }
        // 同上  这个是让盒子不能出页面右侧
        if (ev.touches[0].clientX - disX >= 308) {
           dream.style.left = 308 + "px"
           return false
        }
        // 将盒子的距离页面左侧的样式改变
        dream.style.left = ev.touches[0].clientX - disX + "px"

        // 这个是让盒子不能出页面底部
        if (ev.touches[0].clientY - disY >= 480) {
           dream.style.top = 480 + "px"
           return false
        }
        // 这个是让盒子不能出页面顶部
        if (ev.touches[0].clientY - disY <= 215) {
           dream.style.top = 215 + "px"
           return false
        }
        // 将盒子的距离页面顶端的样式改变
        dream.style.top = ev.touches[0].clientY - disY + "px"
    }
    // 手指抬起事件
    document.ontouchend = function () {
        // 删除手指移动事件
        document.ontouchmove = null
        // 删除手指抬起事件
        document.ontouchend = null
    }
    return false
}

实现的效果