js实现鼠标的拖拽效果

Posted 2020-10-12

拖拽是一个非常实用的页面效果

1.拖拽的一些应用场景：

      1.1. 浏览器标签顺序的切换

      1.2. 页面上小组件的拖拽

      1.3. 弹出层的拖拽

2 .基本原理

      2.1  拖拽的基本原理是：

             鼠标在元素上按下的时候，获取鼠标在页面上的位置，计算鼠标相对元素的定位：disX，disY；  

             鼠标移动的时候，元素跟着鼠标移动，但鼠标相对于元素是不动的，因此，可以根据disX，disY计算元素的位置；

             鼠标松开的时候，元素停止移动；

             最重要的一点是：需要拖动的那个元素position要设置成absolute或relative，这样才可以移动。

      2.2 事件：上述前三个步骤对应三个事件

            onmousedown：在用户按下了任意鼠标按钮时触发

            onmousemove：当鼠标指针在元素内部移动时重复地触发

            onmouseup：在用户释放鼠标按钮时触发

3. 举个例子

html代码：

<div id="box"></div>

CSS代码：

 1 html,
 2 body{
 3     width: 100%;
 4     height: 100%;
 5 }
 6 #box{
 7     width: 100px;
 8     height: 100px;
 9     background-color: pink;
10     position: absolute;
11 }

JS代码：

 1 var box = document.getElementById(‘box‘);
 2 box.onmousedown = function(){
 3     var event = event ? event : window.event; 
 4 
 5     //获取鼠标相对元素的位置
 6     var disX = event.clientX - box.offsetLeft;
 7     var disY = event.clientY - box.offsetTop;
 8 
 9     //当鼠标移动的时候，获取元素的位置
10     document.onmousemove = function(){
11         var event = event ? event : window.event; 
12         var iL = event.clientX - disX;
13         var iT = event.clientY - disY;
14         box.style.left = iL +‘px‘;
15         box.style.top = iT +‘px‘;
16     }
17 
18     //当鼠标松开的是，元素随着鼠标停止
19     document.onmouseup = function(){
20         document.onmousemove = null;
21         document.onmouseup = null;
22     }
23 
24 }

增加磁性吸附效果，js代码改为：

 1 var box = document.getElementById(‘box‘);
 2 box.onmousedown = function(){
 3     var event = event ? event : window.event; 
 4 
 5     //获取鼠标相对元素的位置
 6     var disX = event.clientX - box.offsetLeft;
 7     var disY = event.clientY - box.offsetTop;
 8 
 9     //当鼠标移动的时候，获取元素的位置
10     document.onmousemove = function(){
11         var event = event ? event : window.event; 
12         var iL = event.clientX - disX;
13         var iT = event.clientY - disY;
14 
15         //磁性吸附
16         if(iL<=50){
17             iL = 0;
18         }else if(iL>=document.documentElement.offsetWidth - box.offsetWidth - 50){
19             iL = document.documentElement.offsetWidth- box.offsetWidth;
20         }
21         if(iT<=50){
22             iT = 0;
23         }else if(iT>=document.documentElement.offsetHeight - box.offsetHeight - 50){
24             iT = document.documentElement.offsetHeight- box.offsetHeight;
25         }
26         box.style.left = iL +‘px‘;
27         box.style.top = iT +‘px‘;
28     }
29 
30     //当鼠标松开的是，元素随着鼠标停止
31     document.onmouseup = function(){
32         document.onmousemove = null;
33         document.onmouseup = null;
34     }
35 }