学习js，自己写的一个拖拽
拖拽时候碰到其他div会交换位置，碰到多个div，自动选择重合面积最大的div进行交换。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>drag</title><style>#div1 {width:100px;height:100px;border:1px solid #000;background-color:red;position:absolute;left:0px;top:0px}#div2 {width:100px;height:100px;border:1px solid #000;background-color:green;position:absolute;left:100px;top:150px}#div3 {width:100px;height:100px;border:1px solid #000;background-color:pink;position:absolute;left:200px;top:150px}#div4 {width:100px;height:100px;border:1px solid #000;background-color:blue;position:absolute;left:300px;top:150px}#div5 {width:100px;height:100px;border:1px solid #000;background-color:yellow;position:absolute;left:400px;top:150px}</style><script><!-------定义常用操作---->function o(id){return document.getElementById(id)}function getByClass(sClass,oParent){oParent = oParent ? oParent : document;var aEle=oParent.getElementsByTagName('*');var aResult=[];for(var i=0;i<aEle.length;i++){if(aEle[i].className==sClass){aResult.push(aEle[i])}}return aResult;}//获取样式、、兼容function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name]}}//运动框架function startMove(obj,json,FnEnd){clearInterval(obj.timer)obj.timer=setInterval(function(){var bStop=true;for(var attr in json){var cur=0;if(attr=='opacity'){cur=Math.round(parseFloat(getStyle(obj,attr))*100)}else if(attr=='transform'){var reg=/\-?[0-9]+\.?[0-9]*/g;cur=Math.round(getStyle(obj,attr).match(reg)[0]*10);}else{cur=parseInt(getStyle(obj,attr))}var speed=(json[attr]-cur)/10;speed=(speed>0)?Math.ceil(speed):Math.floor(speed)if(cur!=json[attr]) bStop=false;if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(cur+speed)+')';obj.style.opacity=(cur+speed)/100;}else if(attr=='transform'){obj.style.webkitTransform='rotate('+(cur+speed)+'deg)';}else{obj.style[attr]=cur+speed+'px';}}if(bStop==true){clearInterval(obj.timer);if(FnEnd) FnEnd();}},30)}<!-------定义常用操作 end----><!-------拖拽---->function drag(clssname){var _this=this;this.aDiv=getByClass(clssname);this.disX=0;this.disy=0;this.createObj=document.createElement('div');this.arrObj=[];this.arrArea={};for(var i=0;i<this.aDiv.length;i++){this.aDiv[i].onmousedown=function(ev){_this.dragStar(this,ev);}}}drag.prototype.dragStar=function(obj,ev){var _this=this;var oEv= document.event||ev;this.disX=oEv.clientX-obj.offsetLeft;this.disY=oEv.clientY-obj.offsetTop;this.createObj.style.position='absolute';this.createObj.style.left=obj.offsetLeft+'px';this.createObj.style.top=obj.offsetTop+'px';this.createObj.style.width=getStyle(obj,'width');this.createObj.style.height=getStyle(obj,'height');this.createObj.style.border='1px dotted #000'document.body.appendChild(this.createObj)document.onmousemove=function(ev){_this.draging(obj,ev);}document.onmouseup=function(){_this.dragEnd(obj,_this.selectObj());}return false;}drag.prototype.draging=function(obj,ev){var oEv=document.event||ev;var l=oEv.clientX-this.disX;var t=oEv.clientY-this.disY;if(l<0){l=0;}if(l>document.documentElement.offsetWidh-obj.offsetWidth){l=document.documentElement.offsetWidh-obj.offsetWidth;}this.createObj.style.left=l+'px';this.createObj.style.top=t+'px';this.searchDiv(obj);}drag.prototype.dragEnd=function(obj1,obj2){document.onmousemove=null;document.onmouseup=null;for(var i=0;i< this.arrObj.length;i++){startMove(this.arrObj[i],{opacity:100},false)}if(obj2&&this.arrObj.length>0){startMove(obj1,{left:obj2.offsetLeft,top:obj2.offsetTop},false);startMove(obj2,{left:obj1.offsetLeft,top:obj1.offsetTop,opacity:100},false);}else{startMove(obj1,{left:this.createObj.offsetLeft,top:this.createObj.offsetTop},false);}document.body.removeChild(this.createObj);this.arrObj.length=0;this.arrArea={};}//判断重合的方法，计算重合面积drag.prototype.ifChange=function(obj1,obj2,num){var createPos={left:parseInt(this.createObj.offsetLeft),top:parseInt(this.createObj.offsetTop),right:parseInt(this.createObj.offsetLeft)+parseInt(getStyle(this.createObj,'width')),bottom:parseInt(this.createObj.offsetTop)+parseInt(getStyle(this.createObj,'height'))}var div2Pos={left:parseInt(obj2.offsetLeft),top:parseInt(obj2.offsetTop),right:parseInt(obj2.offsetLeft)+parseInt(getStyle(obj2,'width')),bottom:parseInt(obj2.offsetTop)+parseInt(getStyle(obj2,'height'))}var s=(createPos.left<=div2Pos.right)&&(createPos.top<=div2Pos.bottom)&&(createPos.right>=div2Pos.left)&&(createPos.bottom>=div2Pos.top); var hor=[createPos.top,createPos.bottom,div2Pos.top,div2Pos.bottom].sort(function(a,b){return a-b});var ver=[createPos.left,createPos.right,div2Pos.left,div2Pos.right].sort(function(a,b){return a-b});var area=Math.abs(hor[1]-hor[2])*Math.abs(ver[1]-ver[2])if(s){if(obj1===obj2){}else{startMove(obj2,{opacity:50},false);this.arrObj.push(obj2);this.arrArea[num]=area;}}else{startMove(obj2,{opacity:100},false);this.arrArea[num]=0;}}//匹配拖拽过程中碰到（重合）的divdrag.prototype.searchDiv=function(obj){this.arrObj.length=0;for(var i=0;i<this.aDiv.length;i++){this.ifChange(obj,this.aDiv[i],i);}}//选择重合面积最大的divdrag.prototype.selectObj=function(){var a=0;var str=-1;if(this.arrObj){for(var i in this.arrArea){a=(a>this.arrArea[i])?a:this.arrArea[i];str=(a>this.arrArea[i])?str:i;}}if(a=0){//无碰撞return null;}else{return this.aDiv[str];}}<!-------拖拽 end---->window.onload=function(){new drag('bs');}</script></head><body><div id="div1" class="bs">5</div></body></html>