作者:游必有方RK | 来源:互联网 | 2021-11-13 13:40
在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果。本文将详细介绍javascript的磁性吸附,有需要的朋友可以参考借鉴。
前面的话
上一篇,我们介绍了Javascript动画之模拟拖拽效果篇。但在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果
范围限定
如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定
首先,先要搞清楚是可视区域限定被拖拽元素
左侧范围L0 = 0
右侧范围R0 = document.documentElement.clientWidth
上侧范围T0 = 0
下侧范围B0 = document.documentElement.clientHeight
元素的上下左右四边分别为
左侧边 L = offsetLeft
右侧边 R = offsetLeft + offsetWidth
上侧边 T = offsetTop
下侧边 B = offsetTop + offsetHeight
function limitedRange(obj,fn){
var L0 = 0;
var R0 = document.documentElement.clientWidth;
var T0 = 0;
var B0 = document.documentElement.clientHeight;
var L = obj.offsetLeft;
var R = obj.offsetLeft + obj.offsetWidth;
var T = obj.offsetTop;
var B = obj.offsetTop + obj.offsetHeight;
if(L >= L0 && R <= R0 && T >= T0 && B <= B0){
fn(obj);
}
}
拖拽范围
如果将范围限定用在拖拽元素上,则需要一些改变
首先,限定条件并不是在范围内执行什么,而是不在范围内时,应该执行什么
由于在拖拽实现中,已经获取了元素距离可视区域左上角的X轴和Y轴的距离,所以不需要再通过offsetLeft和offsetTop进行重新获取
磁性吸附
磁性吸附只需要在范围限定的基础上,做一些修改即可
下列代码中,只要元素的四边,距离可视区域范围的四边小于50px,则元素将直接吸附对应的边上
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!