前段时间写了一个简单的div拖拽效果。没想到，昨天项目正好需要一个类似的需求，正好用上了。然而，在移动端出现了一个问题。拖动中使用的三个事件：mousedown、mousemove和mouseup对移动端没有任何影响。毕竟移动终端上没有鼠标。在检查数据之后，发现移动终端上对应的事件是touchstart、touchmove和touchend事件。另外需要注意的一点是，当前鼠标在PC端的坐标为：event.clientX和event.clientY，坐标为：event . touchs[0]。clientX和event.touches。移动端的客户端。

先来说说如何达到这个效果，先看效果：

电脑端

移动终端

首先，分析一个拖动过程。以PC为例。首先按下鼠标(mousedown事件)，然后移动它(mousemove事件)，最后释放鼠标(mouseup事件)。首先，设置一个变量来记录鼠标是否被按下。当鼠标被按下时，我们做一个标记，然后我们需要记录鼠标的当前坐标和这个div的当前偏移量。当鼠标开始移动时，记录鼠标的当前坐标。用鼠标当前坐标减去鼠标按下时的坐标，再加上鼠标按下时div的偏移量，即div与父元素之间的距离。释放鼠标时，将标记更改为“鼠标已释放”。

让我们看看代码：

var标志=false//鼠标按下时是否按下标记var cur={//记录坐标x:0，y:0} var NX，ny，dx，dy，x，y；//函数down(){ flag=true当鼠标被按下时；//确认鼠标按下cur . x=event . client x；//记录x坐标曲线。y=事件。当前鼠标的客户端；//记录当前鼠标的y坐标dx=div2.offsetLeft//记录当时div的左偏移量dy=div 2 . offset top；//记录div的上偏移量}//函数move(){ if(flag){ //如果按下鼠标，继续执行NX=event . clientx-cur . x；//记录X轴上鼠标移动的数据ny=event . clienty-cur . y；//记录y轴x=dx nx中鼠标移动的数据；//x轴上//div的偏移量加上x轴上鼠标移动的距离y=dy ny//y轴上//div的偏移量加上y轴上鼠标移动的距离div 2 . style . left=x ' px '；div 2 . style . top=y ' px '；} }//函数end(){释放鼠标时flag=false//鼠标释放}然后将事件添加到该div。让我们看看在移动端需要做什么。首先，事件不同，只是在移动端增加了touchatart、touchmove和touchend。当移动终端获得事件的坐标时，也有不同的时间。clientX和event.touches。clientY，也很简单，只需加上判断即可。如果是电脑终端，使用事件，如果是移动终端，使用事件。触摸：

var触摸；if(event . touchs){ touch=event . touchs[0]；} else { touch=event}还有一点需要注意的是，移动端的页面在拖动移动端的div时会自动滑动，所以需要在touchmove中给页面增加一个阻止默认事件的功能。

下面是整个代码，可以模拟Chrome下的手机测试。单击此处查看：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题适配移动端的拖动效果/title style # div 1 { height : 1000 px；} # div 2 { position : absolutetop :0 left :0宽度： 100像素；高度： 100像素；背景# bbbbbbb }/style/head dydiv id=' div 1 ' div id=' div 2 '/div/div脚本var flag=falsevar cur={ x:0，y:0 } var nx，ny，dx，dy，x，y；函数down(){ flag=true；定义变量触摸；if(事件。touch){ touch=event。touch[0]；} else { touch=event} cur。x=触摸。客户x；cur。y=触摸。客户关系；dx=div2.offsetLeftdy=div 2。偏移顶部；}函数move(){ if(flag){ var touch；if(事件。touch){ touch=event。touch[0]；} else { touch=event} NX=touch。客户端x-cur。x；ny=触摸。客户-cur。y；x=dx nxy=dy nydiv 2。风格。left=x ' px第二分区。风格。top=y ' px//阻止页面的滑动默认事件文件。addeventlistener(' touch move '，function(){ event。prevent default()；}，false)；} } //鼠标释放时候的函数函数end(){ flag=false；} var div 2=文档。getelementbyid(' div 2 ')；第二分区。addeventlistener('鼠标向下'，function(){ down()；}，false)；第二分区。addeventlistener(' touch start '，function(){ down()；}，false)div 2。addeventlistener('鼠标移动'，函数(){ move()；}，false)；第二分区。addeventlistener(' touch move '，function(){ move()；}，false)文档。尸体。addeventlistener('鼠标向上'，function(){ end()；}，false)；第二分区。addeventlistener(' touch end '，function(){ end()；}，false)；/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。