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>
效果：
时间： 2024-08-28 09:50:54