移动端touchmove实现div的拖动拖拽移动效果

晓风岸柳科技

已于 2023-11-19 22:00:18 修改

阅读量1.4k

点赞数 1

文章标签： javascript 前端开发语言 css

于 2023-10-10 20:12:30 首次发布

本文链接：https://blog.csdn.net/qq_62267045/article/details/133753972

版权

一、touchmove事件使用示例：

传入event参数，touches(0)方法获取第0个触摸点

比如，多个手指触发事件，我只需要第0个手指的触摸事件

touch.pageX 是触摸事件对象中的属性之一，用于获取触摸点相对于整个页面(或文档)X横坐标位置。touch.pageY即获取Y坐标

        divElement.addEventListener('touchmove', function (event) {
            var touch = event.touches[0];
            var touchX = touch.pageX;
            var touchY = touch.pageY;
            console.log('当前手指位置: (' + touchX + ',' + touchY + ')');
        });

效果如下。手指触摸移动时，会不断打印当前手指的触摸坐标

进而，我们就可以使用这个touchmove事件获取到手指触摸点坐标，用来设置div块的left和top属性

二、拖动Div

这是我的部分html代码，其中拖动的图标我是用的阿里巴巴的矢量图标，我引用了图标文件的，所以你如果直接复制我的代码，将不会显示该图标，你借鉴代码就行


<style>
    .content-div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #4bffce;
    }

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

<body>
    <div class="content-div" style="left: 100px;top: 100px;">
        <!-- 以下是拖动的图标 -->
        <div id="move-btn" style="position: absolute;right: 10px;top:5px;font-size: 20px;">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-move"></use>
            </svg>
        </div>
    </div>

</body>

这是html的样子，右上角是拖动的图标

我们给拖动图标增加touchmove事件，当手指触摸移动图标时，获取手指的xy坐标，我们将这个xy坐标减去触摸的初始坐标即可得到需要移动的x和y坐标

初始坐标怎么得到呢，我们用touchstart事件即可得到开始触摸的坐标。

moveBtn.addEventListener('touchstart', function (event) {
            var touch = event.touches[0];
            touchStartX = touch.pageX;
            touchStartY = touch.pageY;
    });

我们上面已经得到了需要移动的x和y坐标，再加上原本div块的left和top即可设置为新的left和top，以下是示例代码

    moveBtn.addEventListener('touchmove', function (event) {
        var touch = event.touches[0];
        //需要移动的x和y坐标
        var x = touch.pageX - touchStartX;
        var y = touch.pageY - touchStartY;
        //重置初始坐标为当前坐标
        touchStartX = touch.pageX;
        touchStartY = touch.pageY;
        //设置left和top属性实现div移动的效果
        contentDiv.style.left = (parseFloat(contentDiv.style.left) + x) + 'px';
        contentDiv.style.top = (parseFloat(contentDiv.style.top) + y) + 'px';
    })

touchumove事件在一次拖动行为中，其内的代码将会被执行很多次，所以该touchmove事件中，每次都必须重置初始坐标，否则，每次touchmove都是在跟最初的触摸坐标进行减法，而实际上，我们需要的是跟上一个坐标做减法，而非初始触摸坐标...，介绍比较麻烦，你可以试试不重置初始坐标就知道了。

以下是完整的js代码

<script>
    //获取到该div块
    var contentDiv = document.querySelector('.content-div');
    //获取到拖动图标
    var moveBtn = document.querySelector('#move-btn');
    //触摸开始的时候，保存开始触摸时的坐标
    moveBtn.addEventListener('touchstart', function (event) {
            var touch = event.touches[0];
            touchStartX = touch.pageX;
            touchStartY = touch.pageY;
    });

    moveBtn.addEventListener('touchmove', function (event) {
        var touch = event.touches[0];
        //需要移动的x和y坐标
        var x = touch.pageX - touchStartX;
        var y = touch.pageY - touchStartY;
        //重置初始坐标为当前坐标
        touchStartX = touch.pageX;
        touchStartY = touch.pageY;
        //设置left和top属性实现div移动的效果
        contentDiv.style.left = (parseFloat(contentDiv.style.left) + x) + 'px';
        contentDiv.style.top = (parseFloat(contentDiv.style.top) + y) + 'px';
    }) 
</script>