移动端拖拽模型

最新推荐文章于 2023-01-05 15:14:12 发布

VIP文章 Elis_

最新推荐文章于 2023-01-05 15:14:12 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/weixin_45679977/article/details/103338136

版权

移动端的拖拽制作原理和 PC 端思路是一样的。都是通过各自的API获取事件的位置，然后求差，通过绝对定位来改变元素的位置。
写前了解：移动端的三个事件touchstart touchmove touchend 分别对应移动端手指按下，移动，抬起。三个事件必须使用 DOM 二级添加监听。其中前两个事件对应的方法是event.touches[0].clientX。最后一个抬起对应的事件是 event.changedtouches[0].clientX。

实现思路：

手指按下移动通过event.touches[0].clientX 来取得手指的位置，两者之间的差，就作为元素的偏移位置。需要注意的是最后一步抬起的事件里面的内容。前面如果每次我们按下抬起就改变元素的位置，会发现元素已有的top 和 left 没有记住，总是给盒子偏移位置。最后一步就是用来记住，按下抬起时，元素的位置，下次按下移动加上偏移位置作为元素的位置。

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>移动端的拖拽事件</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <style>
        img {
   
            position: absolute;
            top: 100px;
            width: 50%;
            height: auto;
        }
    </style>
 </head>
 <body>
    <img src="./images/0.jpg" alt="天安门">
    <script src=<