拖拽时候碰到其他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;
}
}
//匹配拖拽过程中碰到（重合）的div
drag.prototype.searchDiv=function(obj)
{
this.arrObj.length=0;
for(var i=0;i<this.aDiv.length;i++){
this.ifChange(obj,this.aDiv[i],i);
}
}
//选择重合面积最大的div
drag.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">1</div>
<div id="div2" class="bs">2</div>
<div id="div3" class="bs">3</div>
<div id="div4" class="bs">4</div>
<div id="div5" class="bs">5</div>
</body>
</html>