http://bbs.zhinengshe.com/thread-1200-1-1.html
要求：实现div块的拖拽
原理：拖拽过程中鼠标点和div块的相对位置保持不变。
需要理解三点：
1. 为什么要把onmousemove，onmouseup加在document上面 ？
2. onmouseup要怎么使用 ？
3. 如何防止div块跑出边界 ？
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #div1 {
8 width: 200px;
9 height: 200px;
10 background-color: red;
11 position: absolute;
12 }
13 </style>
14 <script>
15 window.onload = function () {
16 var oDiv = document.getElementById("div1");
17
18 var disX = 0;
19 var disY = 0;
20
21 oDiv.onmousedown = function (event) {
22 disX = event.clientX - oDiv.offsetLeft;
23 disY = event.clientY - oDiv.offsetTop;
24
25 document.onmousemove = function (event) {
26
27 var divLeft = event.clientX - disX;
28 var divTop = event.clientY - disY;
29
30 if (divLeft < 0) divLeft = 0;
31 if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {
32 divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;
33 }
34 if (divTop < 0) divTop = 0;
35 if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
36 divTop = document.documentElement.clientHeight - oDiv.offsetHeight;
37 }
38
39 oDiv.style.left = divLeft + "px";
40 oDiv.style.top = divTop + "px";
41 };
42 document.onmouseup = function () {
43 document.onmousemove = null;
44 document.onmouseup = null;
45 }
46 };
47 }
48 </script>
49 </head>
50 <body>
51 <div id="div1"></div>
52 </body>
53 </html>
运行效果：【点击这里】
时间： 2024-11-06 21:41:27