Javascript-拖拽效果的原理及实现

一、拖拽原理

假设浏览器上有一个元素（已经进行绝对定位了），起始位置为(mx,my)，即距浏览器左方位置为mx px，距离浏览器上方位置为my px，

拖拽过程中就是改变left top值，假设鼠标点击元素，并设点击元素的点为(x,y)，这个点肯定是在拖拽元素里面的，随着鼠标的移动可以

得到新的位置，把这个点设为(nx,ny)，这时left值应该为nx-x+mx，top值为ny-y+my，下图所示：

二、用到的方法

　　1、mousemove （鼠标移动时）

　　  2、mousedon （鼠标按下时）

　　  3、mouseup （鼠标松开时）

对于元素的初始位置获取我们可以用element.offsetLeft和element.offTop来获取，

鼠标按下松开的位置我们可以用event.clinentX和event.clinentY来获取。

三、实现

　　下面我们来实现一下：

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         div{
 9             width:50px;
10             height: 50px;
11             background-color: red;
12             position: absolute;
13         }
14     </style>
15 </head>
16 <body>
17 
18     <div></div>
19 
20     <script>
21         
22         var div=document.querySelector("div");
23         // 按下时开始监听在文档中鼠标移动的事件
24         // 开始监听鼠标松开键的事件
25         // 只有按下时才准备拖拽
26         div.onmousedown=function(e1){
27             // 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
28             document.onmousemove=function(e){
29                 // 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
30                 // 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
31                 // 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
32                 div.style.left=e.clientX-e1.offsetX+"px";
33                 div.style.top=e.clientY-e1.offsetY+"px";
34             }
35             // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
36             document.onmouseup=function(){
37                 document.onmousemove=null;
38                 document.onmouseup=null;
39             }
40         }
41     </script>
42 
43 </body>
44 </html>

 

posted @ 2020-04-05 15:45  Codermoon  阅读(371)  评论(0)    收藏  举报