div拖拽， onmousedown ,onmousemove, onmouseup
作者：互联网
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8 #box1{
9 width: 100px;
10 height: 100px;
11 background-color: red;
12 position: absolute;
13 }
14
15 #box2{
16 width: 100px;
17 height: 100px;
18 background-color: yellow;
19 position: absolute;
20
21 left: 200px;
22 top: 200px;
23 }
24
25 </style>
26
27 <script type="text/javascript">
28
29 window.onload = function(){
30 /*
31 * 拖拽box1元素
32 * - 拖拽的流程
33 * 1.当鼠标在被拖拽元素上按下时，开始拖拽 onm ousedown
34 * 2.当鼠标移动时被拖拽元素跟随鼠标移动 onm ousemove
35 * 3.当鼠标松开时，被拖拽元素固定在当前位置 onm ouseup
36 */
37
38 //获取box1
39 var box1 = document.getElementById("box1");
40 //为box1绑定一个鼠标按下事件
41 //当鼠标在被拖拽元素上按下时，开始拖拽 onm ousedown
42 box1.onmousedown = function(event){
43 event = event || window.event;
44 //div的偏移量 鼠标.clentX - 元素.offsetLeft
45 //div的偏移量 鼠标.clentY - 元素.offsetTop
46 var ol = event.clientX - box1.offsetLeft;
47 var ot = event.clientY - box1.offsetTop;
48
49
50 //为document绑定一个onmousemove事件
51 //document移动事件，事件委托到后代box2,也会触发
52 document.onmousemove = function(event){
53 event = event || window.event;
54 //当鼠标移动时被拖拽元素跟随鼠标移动 onm ousemove
55 //获取鼠标的坐标
56 var left = event.clientX - ol;
57 var top = event.clientY - ot;
58
59 //修改box1的位置
60 box1.style.left = left+"px";
61 box1.style.top = top+"px";
62
63 };
64
65 //为document绑定一个鼠标松开事件
66 //box1和box2是兄弟元素，当box1鼠标在box2中松手后，里头的逻辑不会发生，
67 //则需要在html中绑定鼠标松手事件，才会触发后代box2也会触发松手事件
68 document.onmouseup = function(){
69 //当鼠标松开时，被拖拽元素固定在当前位置 onm ouseup
70 //取消document的onmousemove事件
71 document.onmousemove = null;
72 //取消document的onmouseup事件
73 //此时给整个页面绑定松手事件，在元素外部松开鼠标，也会执行alert,这是不希望
74 //需要鼠标松手后，则要取消onmouseup松手事件.此时onmouseup会变成一个一次性事件，
75 //只会触发一次
76 document.onmouseup = null;
77 alert(this);
78 };
79 };
80
81
82
83
84 };
85
86
87 </script>
88 </head>
89 <body>
90 <div id="box1"></div>
91
92 <div id="box2"></div>
93 </body>
94 </html>
1.onmousemove事件需要给html绑定，事件委托到后代box2,也会触发
2.为html绑定一个鼠标松开onmouseup事件，box1和box2是兄弟元素，当box1鼠标在box2中松手后，里头的alert不会触发，则需要在html中绑定鼠标松手事件，才会事件委托触发后代box2，也会触发松手事件
3.此时给整个页面绑定松手事件，在元素外部松开鼠标，也会执行alert,这是不希望，需要鼠标松手后，则要取消onmouseup松手事件.此时onmouseup会变成一个一次性事件，
只会触发一次标签：鼠标,onmousemove,事件,onmouseup,div,document,box1,event 来源： https://www.cnblogs.com/fsg6/p/12835433.html