拖拽--拖拽过程出现虚框效果
Posted a-ling
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽--拖拽过程出现虚框效果相关的知识，希望对你有一定的参考价值。
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>
效果：
以上是关于拖拽--拖拽过程出现虚框效果的主要内容，如果未能解决你的问题，请参考以下文章