浅析Java脚本语言动画模拟拖拽原理

模拟拖拽的原理：

x1等于div.offsetLeft

y1等于div.offsetTop

x2等于ev.clientX(ev表示事件事件)

y2等于ev.clientY

当我们在方块上按下鼠标的时候，x2-x1即可确定。移动鼠标之后，我们用鼠标当前的位置即x4、y4减去x2-x1、y2-y1就可以得到方块现在的位置。

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width : 100px；高度： 100像素；背景：红色；绝对位置：}/style/head body div id=' box '/div script type=' text/JavaScript ' var oBox=document。getelementbyid(' box ')；obox。onmousedown=function(ev){//鼠标按下var ev=ev | | event//获取鼠标离差异得距离var mousebox left=ev。client x-这个。offsetleftvar mousebox top=ev。客户-这个。偏移；obox。onmousemove=function(ev){//鼠标按下左键并移动var ev=ev | | event//设置差异移动时，它的位置obox。风格。左=ev。client x-MouseBoxLeft ' px '；obox。风格。top=ev。client y-MouseBoxLeft ' px '；} oBox.onmouseup=function(){ //鼠标左键抬起obox。onmousemove=obox。onmouseup=null} }/脚本/正文/html优化代码：

【1】鼠标移动快的时候，鼠标会移出方块，这时方块就不会再跟随鼠标动了。

解决办法：就是将onmousemove和onmouseup加到文件对象上

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width : 100px；高度： 100像素；背景：红色；绝对位置：}/style/head body div id=' box '/div script var oBox=document。getelementbyid(' box ')；obox。onmousedown=function(ev){//鼠标按下var ev=ev | | event//获取鼠标离差异得距离var mousebox left=ev。client x-这个。offsetleftvar mousebox top=ev。客户-这个。偏移；文件。onmousemove=function(ev){//鼠标按下左键并移动var ev=ev | | event//设置差异移动时，它的位置obox。风格。左=ev。client x-MouseBoxLeft ' px '；obox。风格。top=ev。client y-MouseBoxLeft ' px '；}文档。onmouseup=function(){//鼠标左键抬起文件。onmousemove=document。onmouseup=null} }/脚本/正文/html【2】当要拖动的方块中有文字时会触发浏览器的默认行为

解决办法：1、使用返回错误的添加到onmousedown事件中阻止浏览器的默认行为（工业工程除外)

2、使用全局捕获（工业工程)

1、使用返回错误的添加到onmousedown事件中阻止浏览器的默认行为（工业工程除外)

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width : 100px；高度： 100像素；背景：红色；绝对位置：top : 0；左： 0；} /style /head body div id='box '模拟拖拽/div脚本var oBox=document。getelementbyid(' box ')；obox。onmousedown=function(ev){//鼠标按下var ev=ev | | event//获取鼠标离差异得距离var mousebox left=ev。client x-这个。offsetleftvar mousebox top=ev。客户-这个。偏移；文件。onmousemove=function(ev){//鼠标按下左键并移动var ev=ev | | event//设置差异移动时，它的位置obox。风格。左=ev。client x-MouseBoxLeft ' px '；obox。风格。top=ev。client y-MouseBoxLeft ' px '；}文档。onmouseup=function(){//鼠标左键抬起文件。onmousemove=document。onmouseup=null} //阻止默认行为返回false}/脚本/正文/html2、使用全局捕获（工业工程)

全局捕获：当我们给一个元素这只全局捕获后，改元素会监听后续发生的所有事件，当有事件发生的时候就会触发改元素的事件

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题/标题正文输入类型='button' id='button1 '值='弹出1' /输入类型='button' id='button2 '值='弹出2' /脚本类型=' text/JavaScript '窗口。onload=function(){ var Btn 1=document。GetElementByID('按钮1 ')；var BTN 2=文档。getelementbyid('按钮2 ')；BTN 1。setcapture()；BTN 1。onclick=function(){ alert(1)；} BTN 2。onclick=function(){ alert(2)；} }/脚本/正文/html给Btn1设置了全局捕获之后，即使我们点击了Btn2还是会触发Btn1的点击事件

在模拟拖拽中，给要拖拽的方块onmousedown添加全局捕获然后再onmouseup中取消全局捕获

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width : 100px；高度： 100像素；背景：红色；绝对位置：} /style/head body div id='box '模拟拖拽/div脚本var oBox=document。getelementbyid(' box ')；obox。onmousedown=function(ev){//鼠标按下var ev=ev | | event//获取鼠标离差异得距离var mousebox left=ev。client x-这个。offsetleftvar mousebox top=ev。客户-这个。偏移；//IE浏览器，全局捕获if(obox。setcapture){ obox。setcapture()；}文档。onmousemove=function(ev){//鼠标按下左键并移动var ev=ev | | event//设置差异移动时，它的位置obox。风格。左=ev。client x-MouseBoxLeft ' px '；obox。风格。top=ev。client y-MouseBoxLeft ' px '；}文档。onmouseup=function(){//鼠标左键抬起文件。onmousemove=document。onmouseup=null//IE下，释放全局捕获释放捕获()；if(obox。释放捕获){ obox。释放捕获()；} } //阻止默认行为返回false}/脚本/正文/html【3】封装模拟拖拽函数

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width : 100px；高度： 100像素；背景：红色；绝对位置：} /style /head body div id='box '模拟拖拽/div脚本var oBox=document。getelementbyid(' box ')；拖动(ObOx)；函数拖动(obj){ obj.onmousedown=函数(ev){ //鼠标按下var ev=ev | | event//获取鼠标离差异得距离var mousebox left=ev。client x-这个。offsetleftvar mousebox top=ev。客户-这个。偏移；//IE浏览器，全局捕获如果。setcapture){ obj。setcapture()；}文档。onmousemove=function(ev){//鼠标按下左键并移动var ev=ev | | event//设置差异移动时，它的位置物体。风格。左=ev。client x-MouseBoxLeft ' px '；物体。风格。top=ev。client y-MouseBoxLeft ' px '；}文档。onmouseup=function(){//鼠标左键抬起文件。onmousemove=document。onmouseup=null//IE下，释放全局捕获释放捕获()；如果。释放捕获){ obj。释放捕获()；} } //阻止默认行为返回false} }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！