1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖拽--带框拖拽</title> 6 <style> 7 #div1{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 position: absolute; 12 } 13 #div1:hover{ 14 cursor: pointer; 15 } 16 .box{ 17 border: 1px dashed black; 18 position: absolute; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="div1"></div> 24 <script> 25 var oDiv = document.getElementById('div1'); 26 27 var disX = 0; //鼠标的横向距离 28 var disY = 0; //鼠标的纵向距离 29 30 oDiv.onmousedown = function(ev){ 31 var oEvent = ev || event; 32 disX = oEvent.clientX - oDiv.offsetLeft; 33 disY = oEvent.clientY - oDiv.offsetTop; 34 35 var oBox = document.createElement('box'); 36 oBox.className = 'box'; 37 38 oBox.style.width = oDiv.offsetWidth - 2 + 'px'; 39 oBox.style.height = oDiv.offsetHeight - 2 + 'px'; 40 41 oBox.style.left = oDiv.offsetLeft + 'px'; 42 oBox.style.top = oDiv.offsetTop + 'px'; 43 44 document.body.appendChild(oBox); 45 46 document.onmousemove = function(ev){ 47 var oEvent = ev || event; 48 var l = oEvent.clientX - disX; 49 var t = oEvent.clientY - disY; 50 51 //根据最新的鼠标坐标来确定div的坐标 52 oBox.style.left = l + 'px'; 53 oBox.style.top = t + 'px'; 54 } 55 56 document.onmouseup = function(ev){ 57 document.onmousemove = null; 58 document.onmouseup = null; 59 60 oDiv.style.left = oBox.offsetLeft + 'px'; 61 oDiv.style.top = oBox.offsetTop + 'px'; 62 63 document.body.removeChild(oBox); 64 } 65 66 //解决火狐拖拽的bug，取消默认事件 67 return false; 68 } 69 </script> 70 </body> 71 </html>
效果：
