拖拽--拖拽过程出现虚框效果

 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>
效果：