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 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 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 100px; 48 height: 100px; 49 border: 1px solid #000; 50 } 51 .ButtonDiv { 52 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>