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>
运行效果：【点击这里】