方块拖拽（原生js） 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>方块拖拽</title>
 6         <style type="text/css">
 7             #box {
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: #FF7F50;
11                 position: absolute;
12                 text-align: center;
13             }
14 
15             #box2 {
16                 width: 100px;
17                 height: 100px;
18                 background-color: yellow;
19                 position: absolute;
20                 left: 200px;
21                 top: 200px;
22                 position: absolute;
23             }
24         </style>
25         <script>
26             /**
27              * 拖拽流程：
28              *         1、当鼠标在被拖拽元素上按下时，开始摇拽    onmousedown
29              *         2、当鼠标移动时被拖拽元素跟随元素鼠标移动  onmousemove
30              *         3、当鼠标松开时，被拖拽元素固定在当前位置  onmouseup
31              */
32             window.onload = function() {
33                 var box = document.getElementById("box");
34                 var box2 = document.getElementById("box2");
35 
36                 drag(box);
37                 drag(box2);
38             }
39 
40             function drag(obj) {
41                 obj.onmousedown = function(event) {
42                     /**
43                      * 针对（**）IE8不支持解决方法
44                      *     setCapture()
45                      *       - 该方法只支持IE，但是在火狐中调用时不会报错
46                      *         chrome中会报错
47                      */
48 
49                     box.setCapture && box.setCapture();
50 
51                     event = event || window.event;
52                     var le = event.clientX - obj.offsetLeft;
53                     var to = event.clientY - obj.offsetTop;
54 
55                     document.onmousemove = function(event) {
56                         event = event || window.event;
57 
58                         var left = event.clientX - le;
59                         var top = event.clientY - to;
60 
61                         obj.style.left = left + "px";
62                         obj.style.top = top + "px";
63                     };
64 
65                     document.onmouseup = function() {
66                         //取消document的onmousemove事件
67                         document.onmousemove = null;
68                         //取消document的onmouseup事件
69                         document.onmouseup = null;
70                         obj.releaseCapture && obj.releaseCapture();
71                         
72                     };
73 
74                     /**
75                      * 拖拽网页中内容，尤其是文字或图片，浏览器会自动搜索，此时会有拖拽功能异常
76                      * 这是浏览器自动行为，若不需要，需要取消（**）
77                      * IE8不支持
78                      */
79 
80                     return false;
81                 };
82             }
83         </script>
84     </head>
85     <body>
86         <div id="box">可拖拽</div>
87         <div id="box2"></div>
88     </body>
89 </html>

 

posted @ 2021-03-12 23:17  柠檬！  阅读(185)  评论(0)    收藏  举报