1 <!DOCTYPE html>
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>code</title>
7 <script src="js/jquery-1.9.1.min.js"></script>
8 <style>
9 body {
10 margin: 5px;
11 }
12
13 .div0 {
14 width: 50px;
15 border-radius: 10px;
16 height: 50px;
17 background: #BBB;
18 color: #FFF;
19 line-height: 25px;
20 text-align: center;
21 font-family: 'Microsoft YaHei';
22 cursor: move;
23 float: left;
24 margin: 10px;
25 font-size: 14px;
26
27 }
28
29 .div0:hover {
30 border: 1px dashed #000;
31 background: #989898;
32 color: #000;
33 }
34
35 .DataSet {
36 width:200px;
37 height: 400px;
38 border: 1px solid #000;
39 margin: 51px 50px 50px 90px;
40 display:none;
41
42
43
44 }
45
46 #span {
47 width: 100px;
48 height: 100px;
49 border: 1px solid #000;
50 }
51 .ButtonDiv {
52 width:300px;
53 height:100px;
54 border:1px solid #828282;
55 display:block;
56 font-size:14px;
57 color:#828282;
58 font-family:'Microsoft YaHei';
59 position: fixed;
60 display:none;
61 top: 0;
62 left: 40%;
63
64 }
65 </style>
66 </head>
67 <body id="body" style="height:400px;">
68 <div class="ButtonDiv" id="buttondiv">
69 </div>
70 <div draggable="true" class="div0" id="div0">
71 测试0
72 </div>
73 <div draggable="true" class="div0" id="div1">
74 测试1
75 </div>
76 <div draggable="true" class="div0" id="div2">
77 测试2
78 </div>
79 <div draggable="true" class="div0" id="div3">
80 测试3
81 </div>
82 <div draggable="true" class="div0" id="div4">
83 测试4
84 </div>
85 <div class="DataSet" id="DataSet">
86 </div>
87
88
89 <script>
90 var count = 0;
91 var div = $(".div0");
92 var data;
93 var drapx;
94 var drapy;
95 var mouseX;
96 var mouseY;
97 var MarginValue;
98 $(".div0").mousedown(function () {
99
100 this.ondragstart = function (e) {
101 mouseX = window.event.offsetX;
102 mouseY = window.event.offsetY;
103 e.dataTransfer.setData("text", e.target.id);
104 e.dataTransfer.effectAllowed = "copy";//设置鼠标进入容器样式
105 document.getElementById(e.target.id).style.border = "1px dashed #fff";
106
107 count++;
108 },
109 this.ondrag = function (e)
110 {
111 },
112 this.ondragend = function (e) {
113
114 document.getElementById(e.target.id).style.border = "none";//放弃退拽时触发
115 }
116 });
117 var DataSet = document.getElementById("body");// document.getElementById("DataSet");
118 DataSet.ondragover = function (e) {
119 this.style.border = "1px dashed rgb(70, 70, 70)";//进入目标时,给目标添加边框
120 e.preventDefault();
121
122
123 },
124 DataSet.ondragenter = function (e)
125 {
126
127 },
128 DataSet.ondragleave = function (e) {
129 this.style.border = "1px solid #000";//离开目标时,删除边框
130 },
131 DataSet.ondrop = function (e) {
132 data = e.dataTransfer.getData("text");
133 var datatar = document.getElementById(data);
134 e.dataTransfer.dropEffect = "copy";
135 document.title = e.target.id;
136 //判断浏览器支持
137 if (datatar.currentStyle) {
138 document.title = "这里是IE:" + datatar.currentStyle.marginTop;//IE支持
139 MarginValue = datatar.currentStyle.marginTop;
140 } else {
141 document.title = "这里是谷歌,火狐,苹果:" + getComputedStyle(datatar, null).marginTop;
142 MarginValue = getComputedStyle(datatar, null).marginTop;
143 }
144 MarginValue = MarginValue.replace("px", "");
145 var TargetTop = e.target.offsetTop - MarginValue;//侵入者
146 var TargetLeft = e.target.offsetLeft - MarginValue;//侵入者
147 var DataTop = datatar.offsetTop - MarginValue;//守卫者
148 var DataLeft = datatar.offsetLeft - MarginValue;//守卫者
149
150 if (e.target.id == "body") {
151 var mouseEndX= window.event.clientX;
152 var mouseEndY = window.event.clientY;
153 datatar.style.position = "absolute";
154
155 datatar.style.top = mouseEndY - mouseY - 10 + "px";//鼠标结束坐标-鼠标开始坐标-元素margin值
156 datatar.style.left = mouseEndX - mouseX - 10 + "px";//鼠标结束坐标-鼠标开始坐标-元素margin值
157 DataSet.appendChild(document.getElementById(data));
158 document.getElementById(data).style.border = "none";//删除边线
159 } else {
160 document.title = MarginValue;
161 datatar.style.top = TargetTop + "px";
162 datatar.style.left = TargetLeft + "px";
163 e.target.style.top = DataTop + "px";
164 e.target.style.left = DataLeft + "px";
165
166
167
168 }
169
170 }
171
172 </script>
173 </body>
174 </html>
