javascript动画的模拟拖拽效果

先看实现效果图。模拟拖放的最终效果类似于在桌面上移动文件夹的效果

原理介绍

当按下鼠标时，拖动开始。当鼠标移动时，被拖动的元素也跟着移动。当鼠标抬起时，拖动结束

因此，拖动的重点是确定被拖动的元素如何移动

假设按下鼠标时，鼠标对象的clientX和clientY分别为x1和x2。视口左上角元素的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分别分配给定位元素的左侧和顶部

div id=' test ' style=' height : 100 px；宽度： 100 px；背景：粉红色；位置：绝对；top:0' left:0'/divscripttest . onmousedown=function(e){ e=e | | event；//获取元素距离定位父元素的x轴和y轴距离var x0=this.offsetLeftvar y0=this.offsetTop//获取鼠标与视口左上角的x轴和y轴距离var x1=e.clientXvar y1=e.clientYtest . onmousemove=function(e){ e=e | | event；//获取鼠标与视口左上角的x轴和y轴距离x2=e.clientXy2=e.clientY//计算此时元素距视口左上角的x轴和y轴距离。var X=x0(x2-x1)；var Y=y0(y2-y1)；//将X和y的值赋给左侧和顶部，使元素移动到相应的位置test . style . left=X ' px '；test . style . top=Y ' px '；} test.onmouseup=function(e){ //鼠标抬起拖动完成后，将onmousemove赋值为null即可得到test.onmousemove=null} }/脚本

代码优化

使用上述代码时，会出现问题。当鼠标拖动速度过快，超过onmousemove事件的触发间隔时，鼠标将离开元素。这将停止元素的拖动过程

此时，如果将mousemove和mouseup事件添加到文档中，就可以解决这个问题

div id=' test ' style=' height : 100 px；宽度： 100 px；背景：粉红色；位置：绝对；top:0' left:0'/divscripttest . onmousedown=function(e){ e=e | | event；//获取元素距离定位父元素的x轴和y轴距离var x0=this.offsetLeftvar y0=this.offsetTop//获取鼠标与视口左上角的x轴和y轴距离var x1=e.clientXvar y1=e.clientYdocument . onmousemove=function(e){ e=e | | event；//获取鼠标与视口左上角的x轴和y轴距离x2=e.clientXy2=e.clientY//计算此时元素距视口左上角的x轴和y轴距离。var X=x0(x2-x1)；var Y=y0(y2-y1)；//将X和y的值赋给左侧和顶部，使元素移动到相应的位置test . style . left=X ' px '；test . style . top=Y ' px '；}文档。onmouseup=function(e){//当鼠标抬起拖动完成后，则可以将onmousemove赋值为null，这样document.onmousemove=null} }/脚本

拖动冲突

因为文本和图片默认支持原生拖拽，如果原生拖拽和模拟拖拽混合在一起，会造成结果不一致

如果被拖动元素的内容中有文本，并且该文本被选中，它将触发文本的本机拖放效果

在文本上双击鼠标选择文本。当您再次移动鼠标时，文本的原生拖放效果将被触发，如下所示

只需在onmousedown事件中停止浏览器的默认行为

div id=' test ' style=' height : 100 px；宽度： 100 px；背景：粉红色；位置：绝对；top:0' left:0'test text/script test . onmousedown=function(e){ e=e | | event；//获取元素距离定位父元素的x轴和y轴距离var x0=this.offsetLeftvar y0=this.offsetTop//获取鼠标与视口左上角的x轴和y轴距离var x1=e.clientXvar y1=e.clientYdocument . onmousemove=function(e){ e=e | | event；//获取鼠标与视口左上角的x轴和y轴距离x2=e.clientXy2=e.clientY//计算此时元素距视口左上角的x轴和y轴距离。var X=x0(x2-x1)；var Y=y0(y2-y1)；//将X和y的值赋给左侧和顶部，使元素移动到相应的位置test . style . left=X ' px '；test . style . top=Y ' px '；}文档。onmouseup=function(e){//当鼠标抬起拖动完成后，则可以将onmousemove赋值为null，这样document.onmousemove=null}//阻止默认行为返回false}/script兼容

以上代码仍然无法阻止IE8- browser中的默认行为。此时，为了实现IE兼容，需要使用全局捕获setCapture()和releaseCapture releasecapture()

首先，让我们来看看全局捕获的效果

在下面的代码中，打开全局捕获后，页面中的所有点击效果都相当于按钮一的点击效果。释放捕获后，效果消失

【注意】IE浏览器完全支持全局抓取；Chrome不支持，使用全局抓取会报错；火狐不报告错误，但沉默失败

button id=' BTN 1 ' button one/button button id=' BTN 2 '打开button one/buttonscriptbtn1的全局捕获。onclick=function(){ alert(1)；} BTN 2 . onclick=function(){ if(BTN 1 . setcapture){ if(BTN 2 . innerhtml . charat(0)=' on '){ BTN 1 . setcapture()；Btn2.innerHTML='关闭按钮一的全局捕获'；} else { BTN 1 . release capture()；Btn2.innerHTML='打开按钮一的全局捕获'；} }}/script通过在IE浏览器中设置全局抓取，实现了取消文本原生拖拽的默认行为

div id=' test ' style=' height : 100 px；宽度： 100 px；背景：粉红色；位置：绝对；top:0' left:0'test text/script test . onmousedown=function(e){ e=e | | event；//获取元素距离定位父元素的x轴和y轴距离var x0=this.offsetLeftvar y0=this.offsetTop//获取鼠标与视口左上角的x轴和y轴距离var x1=e.clientXvar y1=e.clientYdocument . onmousemove=function(e){ e=e | | event；//获取鼠标与视口左上角的x轴和y轴距离x2=e.clientXy2=e.clientY//计算此时元素距视口左上角的x轴和y轴距离。var X=x0(x2-x1)；var Y=y0(y2-y1)；//将X和y的值赋给左侧和顶部，使元素移动到相应的位置test . style . left=X ' px '；test . style . top=Y ' px '；}文档。onmouseup=function(e){//当鼠标抬起拖动完成后，则可以将onmousemove赋值为null，这样document.onmousemove=null//发布全局捕获if(test . release capture){ test . release capture()；} }//防止默认行为返回false//IE8-浏览器阻止默认行为if(test . setcapture){ test . setcapture()；} }/脚本

摘要

以上就是Javascript模拟拖放的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助。有问题可以留言交流。