纯js做鼠标拖拽物体并记录鼠标位置的效果(附pageX clientX offsetX screenX的区别图)

Posted ztt_tttt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯js做鼠标拖拽物体并记录鼠标位置的效果(附pageX clientX offsetX screenX的区别图)相关的知识,希望对你有一定的参考价值。

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7 
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         .div{
13             width: 100px;
14             height: 100px;
15             background-color: aqua;
16             position: absolute;
17         }
18 
19 
20     </style>
21 
22     <script>
23         //记录鼠标是否按下
24         var isMouseDown=false;
25         //获取鼠标刚按下时的位置
26         var offestX=0;
27         var offestY=0;
28 
29         //文档就绪函数
30         onload=function(e){
31             //获取div
32             var div=document.getElementsByClassName("div")[0];
33             //鼠标按下事件,鼠标按下是相对div而言的
34             div.onmousedown=function(e){
35                 isMouseDown=true;
36                 //记录鼠标刚按下时的位置,相对物体div而言
37                 offestX= e.offsetX;
38                 offestY= e.offsetY;
39 
40             }
41                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
42 
43             //鼠标移动,鼠标移动是相对于整个页面而言的,所以用document
44             document.onmousemove=function(e){
45                 //如何鼠标没有按下就直接返回,不用执行下面的代码
46                 if(isMouseDown==false)return;
47                 var x=  e.pageX-offestX;
48                 var y=  e.pageY-offestY;
49                 div.style.left=x+"px";//需要注意的是。position中的top和left的相对物体的左上角而言的。所以我们在鼠标移动时要重新计算左上角的位置
50                 div.style.top=y+"px";
51              }
52             //鼠标抬起
53             document.onmouseup=function(e){
54                 isMouseDown=false;
55 
56             }
57 
58         }
59 
60 
61     </script>
62 </head>
63 <body>
64 <div class="div" style="top: 0px;left: 0px">
65 
66 </div>
67 </body>
68 </html>

示图讲解:

 

 

以上是关于纯js做鼠标拖拽物体并记录鼠标位置的效果(附pageX clientX offsetX screenX的区别图)的主要内容,如果未能解决你的问题,请参考以下文章

unity3d 2D平面游戏实现鼠标拖拽物体移动

在Unity中实现鼠标拖拽物体,滚轮控制物体远近的效果

你好,请问在UNITY3D中如何实现用鼠标左键拖拽控制一个组合物体的旋转啊?

jQuery 通过鼠标摇拽改变div的大小

js面向对象开发之--元素拖拽

用JS实现版面拖拽效果