JavaScript动画-磁性吸附

Posted 2020-08-22 老板丶鱼丸粗面

▓▓▓▓▓▓ 大致介绍

　　磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果，如果对模拟拖拽有疑问的同学请移步模拟拖拽。

　　源代码、效果：点这里

 

▓▓▓▓▓▓ 范围限定（可视区）

　　先来看一个在可视区范围内的模拟拖拽，我们先要搞清楚可视区的范围。

　　可视区就是用户可以看到的区域，有上、下、左、右四个范围

　　上：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                 }