js拖动多个方块

合并方块，类似于qq空间好友管理的拖动效果==

View Code 
  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>

posted on 2012-08-20 15:31  hey,jude  阅读(1317)  评论(0)  编辑  收藏  举报