1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

JS原生拖放功能的实现模拟拖拽效果

原理:

  模拟拖拽最终效果和在桌面上移动文件夹的效果类似

鼠标按下时,拖拽开始。鼠标移动时,被拖拽元素跟着鼠标一起移动。鼠标抬起时,拖拽结束

  所以,拖拽的重点是确定被拖拽元素是如何移动的

假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和y1。元素距离视口左上角x轴和y轴分别为x0和y0

  鼠标移动的某一时刻,clientX和clientY分别为x2和y2

  所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1

  元素移动后,元素距离视口左上角x轴和y轴的位置分别为

    X = x0 + (x2-x1)

    Y = y0 + (y2-y1)

代码实现

  将上面的原理用代码实现如下

  鼠标按下时,初始态的x0和y0分别用offsetLeft和offsetTop表示

  鼠标移动时,瞬时态的x和y分别赋值为定位后元素的left和top

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  	</head>  	<body>  		<div id="test" style="height:100px;width:100px;background:pink;position:absolute;top:0;left:0;"></div>  <script>  test.onmousedown = function(e){      e = e || event;      //获取元素距离定位父级的x轴及y轴距离      var x0 = this.offsetLeft;      var y0 = this.offsetTop;      //获取此时鼠标距离视口左上角的x轴及y轴距离      var x1 = e.clientX;      var y1 = e.clientY;        test.onmousemove = function(e){          e = e || event;          //获取此时鼠标距离视口左上角的x轴及y轴距离          x2 = e.clientX;          y2 = e.clientY;              //计算此时元素应该距离视口左上角的x轴及y轴距离          var X = x0 + (x2 - x1);          var Y = y0 + (y2 - y1);          //将X和Y的值赋给left和top,使元素移动到相应位置          test.style.left = X + 'px';          test.style.top = Y + 'px';      }        test.onmouseup = function(e){          //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可          test.onmousemove = null;      }  }  </script>  	</body>  </html>

效果图片:

原文链接:https://www.qiquanji.com/post/8062.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: