javaｓｃｒｉｐｔ动画的磁吸附效应
在前面的话在最后一章中，我们介绍了javaｓｃｒｉｐｔ动画的模拟拖放效果，但在实际应用中，往往需要限制拖放元素的范围，通过限制范围和添加一些辅助措施，可以达到磁性吸附的效果。
限制范围
如果我们限制只能在可视范围内移动的元素，我们需要限制范围。
首先，很明显，视觉区域是被拖动和拖动的。
L0 = 0的左侧
权利范围document.documentelement.clientwidth R0 =
上侧距T0＝0
下侧方位B0 = document.documentelement.clientheight
元素的上、左、左分别为
我offsetleft左侧
右边的R = offsetleft + offsetwidth
上面offsettop T =
低侧B = offsettop + offsetheight
功能范围（obj，FN）{
无功L0 = 0；
VaR R0 = document.documentelement.clientwidth；
变量T0＝0；
VaR B0 = document.documentelement.clientheight；
var = obj.offsetleft；
VAR r = obj.offsetleft + obj.offsetwidth；
var t = obj.offsettop；
var b = obj.offsettop + obj.offsetheight；
如果（l l0 r T0 B < = > = = B0）{
FN（obj）；
}
}
拖放范围
如果作用域仅限于拖放元素，则需要进行一些更改。
首先，限制不是它们在范围内做的，而是当它们不在范围内时应该做什么。
因为在拖放实现X轴和可见区域的左上角的Y轴之间的距离了，所以不需要再通过offsetleft和offsettop。
测试文本
拖曳功能（obj）{
obj.onmousedown =功能（e）{
E = E事件| |；
获取父x元素定位距离和Y轴距离
VaR x0 = this.offsetleft；
VaR y0 = this.offsettop；
从视口鼠标左上角获取x 和y轴。
VaR X1 = e.clientx；
VaR Y1 = e.clienty；
鼠标单击，获取页面的区域。
无功L0 = 0；
VaR R0 = document.documentelement.clientwidth；
变量T0＝0；
VaR B0 = document.documentelement.clientheight；
鼠标单击，获取元素的宽度和高度。
var呃= obj.offsetheight；
VaR EW = obj.offsetwidth；
document.onmousemove =功能（e）{
E = E事件| |；
从视口鼠标左上角获取x 和y轴。
X2 = e.clientx；
Y2 = e.clienty；
计算距离/元素应视为x轴的左上角和Y轴的距离。
var x = x +（X2 X1）；
var y = Y0 +（Y2—Y1）；
******有限******* / /
移动鼠标以获得瞬时四个元素值
var；
var；
var；
var；
在x和y左/左，并分配到顶部之前，以限制的范围
仅在范围内，只有相应的移动
/ /如果离开了范围，10
如果（L＜10）{ x = 0；}
如果从右 / /左，设置R0
如果（r＞r0）{ x = R0 EW；}
如果从侧面/范围，顶部T0
如果（t）；；
如果从侧面或范围上到B0
如果（b＞B0）{ y = B0 - EH；}
obj.style.left = x + 'px；
obj.style.top = y + 'px；
}
document.onmouseup =功能（e）{
/ /当鼠标抬起，拖到年底，移动鼠标将被分配到空。
document.onmousemove = null；
发布/全局捕获
如果（obj。捕获释放）{
Obj.releaseCapture（）；
}
}
停止默认行为
返回false；
/ / IE8浏览器防止违约行为
如果（obj。设置鼠标捕获是是是）{
Obj.setCapture（）；
}
}
}
拖动（测试）；
磁吸附
磁吸附只需要根据限度进行修改。
在下面的代码中，只要该元素的四个边，从可见光范围的四边的距离小于50px，元素直接吸收相应的边缘。
测试文本
拖曳功能（obj）{
obj.onmousedown =功能（e）{
E = E事件| |；
获取父x元素定位距离和Y轴距离
VaR x0 = this.offsetleft；
VaR y0 = this.offsettop；
从视口鼠标左上角获取x 和y轴。
VaR X1 = e.clientx；
VaR Y1 = e.clienty；
鼠标单击，获取页面的区域。
无功L0 = 0；
VaR R0 = document.documentelement.clientwidth；
变量T0＝0；
VaR B0 = document.documentelement.clientheight；
鼠标单击，获取元素的宽度和高度。
var呃= obj.offsetheight；
VaR EW = obj.offsetwidth；
document.onmousemove =功能（e）{
E = E事件| |；
从视口鼠标左上角获取x 和y轴。
X2 = e.clientx；
Y2 = e.clienty；
计算距离/元素应视为x轴的左上角和Y轴的距离。
var x = x +（X2 X1）；
var y = Y0 +（Y2—Y1）；
/ / ******* ******磁吸附
移动鼠标以获得瞬时四个元素值
var；
var；
var；
var；
在x和y左/左，并分配到顶部之前，以限制的范围
仅在范围内，只有相应的移动
如果左 / /吸附范围的到来，留下10
如果（L L0＜50）{ x = 0；}
在吸附 / /范围的右侧如果不设置为R0。
如果（R0 R＜50）{ x = R0 EW；}
如果达到了吸附的最大范围
如果（t - T0 50）{ y = T0；}
在吸附 / /范围的右侧如果顶部设置为B0。
如果（B0 B＜50）{ y = B0 - EH；}
obj.style.left = x + 'px；
obj.style.top = y + 'px；
}
document.onmouseup =功能（e）{
/ /当鼠标抬起，拖到年底，移动鼠标将被分配到空。
document.onmousemove = null；
发布/全局捕获
如果（obj。捕获释放）{
Obj.releaseCapture（）；
}
}
停止 / /默认行为
返回false；
/ / IE8浏览器防止违约行为
如果（obj。设置鼠标捕获是是是）{
Obj.setCapture（）；
}
}
}
拖动（测试）；
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！