js拖动多个方块
合并方块,类似于qq空间好友管理的拖动效果==
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <HTML XMLNS:ELEMENT> 3 <html> 4 <head> 5 <title>::move::</title> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <style> 8 body{ 9 padding:0px; 10 background-color:#efefef; 11 } 12 #panel{ 13 position:absolute; 14 } 15 #panel>div{ 16 border-top-left-radius:5px; 17 border-top-right-radius:5px; 18 border-bottom-left-radius:5px; 19 border-bottom-right-radius:5px; 20 box-shadow:3px 3px 8px #afafaf; 21 opacity:0.7; 22 filter:alpha(opacity=70); 23 color:white; 24 font-size:38px; 25 font-family:微软雅黑; 26 text-align:center; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="panel"></div> 32 </body> 33 </html> 34 35 36 <script type="text/javascript"> 37 var color = "#afcfff"; 38 var color_ = "#5f7fff"; 39 var height = 90; 40 var width = 160; 41 var xDivs = 6; 42 var yDivs = 5; 43 var aSelected = new Array(); 44 var aTempObj = new Array(); 45 var tempLen = 0; 46 //初始化 47 (function(){ 48 for(var i = 0;i < yDivs;i++) { 49 for(var j = 0;j < xDivs;j++) { 50 var oD = new divFactory(i + "_" + j,i * (height + 10),j * (width + 10),width,height); 51 oD.draw(); 52 aTempObj.push(oD); 53 } 54 } 55 })(); 56 57 //select 58 function doSelect(o,p){ 59 o.remove(); 60 if(o.getSld()){ 61 //aSelected.pop(o); 62 o.setSld(false); 63 o.setBgcolor(color); 64 o.draw(); 65 } else { 66 o.setSld(true); 67 o.setBgcolor(color_); 68 o.draw(); 69 //aSelected.push(o); 70 } 71 } 72 73 //move 74 function doMove(o,p,event){ 75 event = event || window.event; 76 if(event.button == 1){ 77 //doSelect(o,p); 78 //获取选中项 79 for(var i = 0;i < aTempObj.length;i++){ 80 if(aTempObj[i].getSld()){ 81 aSelected.push(aTempObj[i]); 82 } 83 } 84 tempLen = aSelected.length; 85 //移动 86 for(var i = 0;i < aSelected.length;i++){ 87 if(aSelected[i].getId() == o.getId()){ 88 continue; 89 } 90 moveByStep(aSelected[i],o.getTop(),o.getLeft(),p,i); 91 } 92 //调整位置,清除选中项 93 setTimeout(function(){ 94 for(var i = 0;i < tempLen;i++){ 95 aSelected[i].remove(); 96 aSelected[i].setZIndex(i + 1); 97 aSelected[i].setTop(o.getTop() + (i + 1)); 98 aSelected[i].setLeft(o.getLeft() + (i + 1)); 99 aSelected[i].setText(tempLen + 1); 100 aSelected[i].draw(); 101 } 102 for(var i = 0;i < aTempObj.length;i++){ 103 aTempObj[i].remove(); 104 aTempObj[i].setSld(false); 105 aTempObj[i].setBgcolor(color); 106 aTempObj[i].draw(); 107 } 108 aSelected = new Array(); 109 },tempLen * 30 + 300); 110 } 111 } 112 113 //doMove 114 function moveByStep(o,t,l,p,i){ 115 var top = o.getTop(); 116 var left = o.getLeft(); 117 var dt = parseInt((t - top) / 10); 118 var dl = parseInt((l - left) / 10); 119 var index = 0; 120 var timer = window.setInterval(function(){ 121 o.remove(); 122 o.setTop(o.getTop() + dt); 123 o.setLeft(o.getLeft() + dl); 124 o.draw(); 125 index++; 126 if(index == 10){ 127 window.clearInterval(timer); 128 o.setZIndex(i + 1); 129 o.setTop(t + (i + 1)); 130 o.setLeft(l + (i + 1)); 131 o.draw(); 132 //doSelect(o,p); 133 } 134 },10); 135 } 136 137 //div factory 138 function divFactory(id,t,l,w,h) { 139 //private 140 var id = id; 141 var top = t + "px"; 142 var left = l + "px"; 143 var width = w + "px"; 144 var height = h + "px"; 145 var sld = false; 146 var bgcolor = color; 147 var self = this; 148 var _parent = document.getElementById("panel"); 149 var zIndex = 0; 150 var text = ""; 151 //public 152 this.getId = function() { 153 return id; 154 } 155 this.setTop = function(t) { 156 top = t + "px"; 157 } 158 this.getTop = function() { 159 return parseInt(top.substring(0,top.indexOf("p"))); 160 } 161 this.setLeft = function(l) { 162 left = l + "px"; 163 } 164 this.getLeft = function() { 165 return parseInt(left.substring(0,left.indexOf("p"))); 166 } 167 this.setBgcolor = function(c) { 168 bgcolor = c; 169 } 170 this.setSld = function(b){ 171 sld = b; 172 } 173 this.getSld = function() { 174 return sld; 175 } 176 this.setZIndex = function(z) { 177 zIndex = z; 178 } 179 this.setText = function(t){ 180 text = t; 181 } 182 this.remove = function() { 183 _parent.removeChild(document.getElementById(id)); 184 } 185 this.draw = function() { 186 var oDiv = document.createElement("div"); 187 oDiv.id = id; 188 oDiv.style.position = "absolute"; 189 oDiv.style.top = top; 190 oDiv.style.left = left; 191 oDiv.style.width = width; 192 oDiv.style.height = height; 193 oDiv.style.lineHeight = height; 194 oDiv.style.backgroundColor = bgcolor; 195 oDiv.style.border = "solid 1px #5a7faf"; 196 oDiv.style.cursor = "pointer"; 197 oDiv.style.zIndex = zIndex; 198 oDiv.title = id; 199 oDiv.innerHTML = text; 200 oDiv.onclick = function(){ 201 doSelect(self,_parent); 202 } 203 oDiv.onmousedown = function(event){ 204 doMove(self,_parent,event); 205 } 206 _parent.appendChild(oDiv); 207 } 208 } 209 </script>