HTML dnd记录

浏览数：35 / 时间：2015年06月09日
  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>