拖拽--吸附

Posted 2020-09-10 a-ling

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽--吸附相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>拖拽--吸附效果</title>
 6         <style>
 7             #div1{
 8                 width: 100px;
 9                 height: 100px;
10                 background: red;
11                 position: absolute;
12             }
13             #div2{
14                 width: 700px;
15                 height: 500px;
16                 background: #ccc;
17                 position: relative;
18             }
19             #div1:hover{
20                 cursor: pointer;
21             }
22         </style>
23     </head>
24     <body>
25         <div id="div2">
26             <div id="div1"></div>
27         </div>
28         <script>
29             var oDiv = document.getElementById(‘div1‘);
30             var oDiv2 = document.getElementById(‘div2‘);
31             
32             var disX = 0;    //鼠标的横向距离
33             var disY = 0;     //鼠标的纵向距离
34             
35             oDiv.onmousedown = function(ev){
36                 var oEvent = ev || event;
37                 disX = oEvent.clientX - oDiv.offsetLeft;
38                 disY = oEvent.clientY - oDiv.offsetTop;
39                 
40                 document.onmousemove = function(ev){
41                     var oEvent = ev || event;
42                     var l = oEvent.clientX - disX;   //div1的横向距离
43                     var t = oEvent.clientY - disY;   ////div1的纵向距离
44                     
45                     if(l<50){   //div1从div2左边被拖出去   吸附效果
46                         l = 0;
47                     }else if(l > oDiv2.offsetWidth - oDiv.offsetWidth){
48                         l = oDiv2.offsetWidth - oDiv.offsetWidth;
49                     }
50                     if(t<50){   //div1从div2上边被拖出去
51                         t = 0;
52                     }else if(t>oDiv2.offsetHeight - oDiv.offsetHeight){
53                         t = oDiv2.offsetHeight - oDiv.offsetHeight;
54                     }
55                     
56                     //根据最新的鼠标坐标来确定div的坐标
57                     oDiv.style.left = l + ‘px‘;
58                     oDiv.style.top = t + ‘px‘;
59                 }
60                 
61                 document.onmouseup = function(ev){
62                     document.onmousemove = null;
63                     document.onmouseup = null;
64                 }
65                 
66                 //解决火狐拖拽的bug，取消默认事件
67                 return false;
68             }
69         </script>
70     </body>
71 </html>

以上是关于拖拽--吸附的主要内容，如果未能解决你的问题，请参考以下文章

拖拽-吸附

鼠标拖拽吸附效果

限制范围拖拽，磁性吸附。

Vue3拖拽缩放组件，支持吸附对齐，实时参考线等

javascript动画系列第二篇——磁性吸附