鼠标拖拽效果

Posted 2020-10-30 悔创阿里-杰克马

 1     <div id="div3">
 2     </div>
 3     <script type="text/javascript">
 4         
 5             
 6         div3.onmousedown= function(e){
 7             var arr =[];
 8             arr[0] =[div3.offsetLeft,div3.offsetTop];//记录第一次点击的值;
 9             var x = e.offsetX;//获取元素鼠标点击坐标
10             var y = e.offsetY;//获取元素鼠标点击坐标
11             document.onmousemove = function(e){
12                 div3.style.left=e.clientX -x+"px";//left值
13                 div3.style.top=e.clientY -y+"px";//top值
14                 var m =div3.style.left;
15                 var n =div3.style.top;
16                 var arr1=[m,n];            
17                 arr.push(arr1);
18             }
19             // console.log(arr);
20             document.onmouseup= function(){
21                 document.onmousemove=null;
22                 document.onmouseup=null;
23                 var len=arr.length;
24                 function fh(){
25                     len--;
26                     if(len<0){
27                         clearInterval(t);    
28                     }else{
29                         div3.style.left=arr[len][0];
30                         div3.style.top =arr[len][1];
31                         }
32                 }
33                 var t=setInterval(fh,10);
34             }
35          }        
36                 
37     </script>