前面的话
上一篇,我们介绍了效果篇。但在实际应用中,常常需要为拖拽的元素限定范围。而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果
范围限定
如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定
首先,先要搞清楚是可视区域限定被拖拽元素
左侧范围L0 = 0
右侧范围R0 = document.documentElement.clientWidth
上侧范围T0 = 0
下侧范围B0 = document.documentElement.clientHeight
元素的上下左右四边分别为
左侧边 L = offsetLeft
右侧边 R = offsetLeft + offsetWidth
上侧边 T = offsetTop
下侧边 B = offsetTop + offsetHeight
= L0 && R <= R0 && T >= T0 && B <= B0){
fn(obj);
}
}
拖拽范围
如果将范围限定用在拖拽元素上,则需要一些改变
首先,限定条件并不是在范围内执行什么,而是不在范围内时,应该执行什么
由于在拖拽实现中,已经获取了元素距离可视区域左上角的X轴和Y轴的距离,所以不需要再通过offsetLeft和offsetTop进行重新获取
文字