javaｓｃｒｉｐｔ动画仿真与拖动原理分析

模拟拖放原理：
X1等于div.offsetleft

Y1等于div.offsettop

X2等于ev.clientx（EV事件事件）

Y2等于ev.clienty

当我们按块鼠标，x2-x1可以确定。后移动鼠标，我们可以使用鼠标的当前位置，X4，Y4，x2-x1，和y2-y1去广场的位置。

代码uff1a

文件

#箱{
宽度：100px；
身高：100px；
背景：红色；
位置：绝对；
}
无功obox = document.getelementbyid（'box）；
obox.onmousedown =功能（EV）{
鼠标按下
VaR EV = EV事件| |；
从div的距离获取鼠标
无功mouseboxleft = ev.clientx - this.offsetleft；
无功mouseboxtop = ev.clienty - this.offsettop；
obox.onmousemove =功能（EV）{
按下按钮移动鼠标。
VaR EV = EV事件| |；
设置移动，它的位置
obox.style.left = ev.clientx - mouseboxleft + 'px；
obox.style.top = ev.clienty - mouseboxleft + 'px；
}
OBox.onmouseup = function () {
鼠标左键
obox.onmousemove = obox.onmouseup = null；
}
}
优化代码：

{ 1 }当鼠标移动很快时，鼠标将移出块，块将不再跟随鼠标。

解决方案是将移动鼠标和onmouseup的文档对象

代码uff1a

文件

#箱{
宽度：100px；
身高：100px；
背景：红色；
位置：绝对；
}
无功obox = document.getelementbyid（'box）；
obox.onmousedown =功能（EV）{
鼠标按下
VaR EV = EV事件| |；
从div的距离获取鼠标
无功mouseboxleft = ev.clientx - this.offsetleft；
无功mouseboxtop = ev.clienty - this.offsettop；
document.onmousemove =功能（EV）{
按下按钮移动鼠标。
VaR EV = EV事件| |；
设置移动，它的位置
obox.style.left = ev.clientx - mouseboxleft + 'px；
obox.style.top = ev.clienty - mouseboxleft + 'px；
}
document.onmouseup =函数（）{
鼠标左键
document.onmousemove = document.onmouseup = null；
}
}
（2）当要拖动的块中有文本时，浏览器的默认行为被触发。

解决方法：1、使用返回false添加到鼠标事件来阻止浏览器的默认行为（除IE）

2。使用全局捕获（IE）

1、阻塞浏览器的默认行为与返回false添加到鼠标事件（除IE）

代码uff1a

文件

#箱{
宽度：100px；
身高：100px；
背景：红色；
位置：绝对；
顶部：0；
左：0；
}
模拟阻力

无功obox = document.getelementbyid（'box）；
obox.onmousedown =功能（EV）{
鼠标按下
VaR EV = EV事件| |；
从div的距离获取鼠标
无功mouseboxleft = ev.clientx - this.offsetleft；
无功mouseboxtop = ev.clienty - this.offsettop；
document.onmousemove =功能（EV）{
按下按钮移动鼠标。
VaR EV = EV事件| |；
设置移动，它的位置
obox.style.left = ev.clientx - mouseboxleft + 'px；
obox.style.top = ev.clienty - mouseboxleft + 'px；
}
document.onmouseup =函数（）{
鼠标左键
document.onmousemove = document.onmouseup = null；
}
停止默认行为
返回false；
}
2。使用全局捕获（IE）

全局捕获：当我们捕获一个全局元素时，修改后的元素将监听所有后续事件。当事件发生时，它将触发事件来更改元素。

代码uff1a

文件
在window.onload =函数（）{
VaR BTN1 = document.getelementbyid（'button1）；
var BTN2 = document.getelementbyid（'button2）；
btn1.setcapture（）；
btn1.onclick =函数（）{
警报（1）；
}
btn2.onclick =函数（）{
警报（2）；
}
}
在设置为BTN1全球捕捉，即使我们点击BTN2，点击事件触发BTN1触发

在模拟的拖累，加上全球捕获的拖动和下降平方onmousedown然后取消onmouseup全球捕获

代码uff1a

文件

#箱{
宽度：100px；
身高：100px；
背景：红色；
位置：绝对；
}
模拟阻力

无功obox = document.getelementbyid（'box）；
obox.onmousedown =功能（EV）{
鼠标按下
VaR EV = EV事件| |；
从div的距离获取鼠标
无功mouseboxleft = ev.clientx - this.offsetleft；
无功mouseboxtop = ev.clienty - this.offsettop；
IE浏览器，全局捕获
如果（obox。设置鼠标捕获是是是）{
OBox.setCapture（）；
}
document.onmousemove =功能（EV）{
按下按钮移动鼠标。
VaR EV = EV事件| |；
设置移动，它的位置
obox.style.left = ev.clientx - mouseboxleft + 'px；
obox.style.top = ev.clienty - mouseboxleft + 'px；
}
document.onmouseup =函数（）{
鼠标左键
document.onmousemove = document.onmouseup = null；
/ / IE下，全球捕获捕获释放（释放）；
如果（obox。捕获释放）{
OBox.releaseCapture（）；
}
}
停止默认行为
返回false；
}
{ 3 }封装模拟拖动功能

代码：

文件

#箱{
宽度：100px；
身高：100px；
背景：红色；
位置：绝对；
}
模拟阻力

无功obox = document.getelementbyid（'box）；
拖（obox）；
拖曳功能（obj）{
obj.onmousedown =功能（EV）{
鼠标按下
VaR EV = EV事件| |；
从div的距离获取鼠标
无功mouseboxleft = ev.clientx - this.offsetleft；
无功mouseboxtop = ev.clienty - this.offsettop；
IE浏览器，全局捕获
如果（obj。设置鼠标捕获是是是）{
Obj.setCapture（）；
}
document.onmousemove =功能（EV）{
按下按钮移动鼠标。
VaR EV = EV事件| |；
设置移动，它的位置
obj.style.left = ev.clientx - mouseboxleft + 'px；
obj.style.top = ev.clienty - mouseboxleft + 'px；
}
document.onmouseup =函数（）{
鼠标左键
document.onmousemove = document.onmouseup = null；
/ / IE下，全球捕获捕获释放（释放）；
如果（obj。捕获释放）{
Obj.releaseCapture（）；
}
}
停止默认行为
返回false；
}
}
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！