磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步。
源代码、效果:
先来看一个在可视区范围内的模拟拖拽,我们先要搞清楚可视区的范围。
可视区就是用户可以看到的区域,有上、下、左、右四个范围
上:T = 0
下:B = document.documentElement.clientHeight
左:L = 0
右:R = document.documentElement.clientWidth
我们控制 div 在可视区范围内拖拽就是设置 div 的 left 和 top 值,从下图我们可以看到 left 和 top 应设置的值
代码中用 L 和 R 记录方块的坐标值
代码如下:
- 1
- if (L < 0) {
- 2 // 左侧范围
- 3 L = 0;
- 4
- } else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
- 5 // 右侧范围
- 6 L = document.documentElement.clientWidth - obj.offsetWidth;
- 7
- }
- 8
- if (T < 0) {
- 9 // 上侧范围
- 10 T = 0;
- 11
- } else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
- 12 // 下侧范围
- 13 T = document.documentElement.clientHeight - obj.offsetHeight;
- 14
- }
磁性吸附就是在范围限定的基础上改进得来的
如图:
我们把方块拖到距离可视区边界 30px 的位置,放快就自动的吸附到边框上。
代码:
- 1
- if (L < 50) {
- 2 // 左侧范围
- 3 L = 0;
- 4
- } else if (L > document.documentElement.clientWidth - obj.offsetWidth - 50) {
- 5 // 右侧范围
- 6 L = document.documentElement.clientWidth - obj.offsetWidth;
- 7
- }
- 8
- if (T < 50) {
- 9 // 上侧范围
- 10 T = 0;
- 11
- } else if (T > document.documentElement.clientHeight - obj.offsetHeight - 50) {
- 12 // 下侧范围
- 13 T = document.documentElement.clientHeight - obj.offsetHeight;
- 14
- }
来源: http://www.bubuko.com/infodetail-1865108.html