拖拽碰撞效果最終版，沒準還有bug，不過現在在各個瀏覽器下效果是對的，代碼需要精簡一些，以后有時間了在弄吧，現在先不理了，感冒了，沒有心情整理
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>可拖拽的照片墻</title> <style type="text/css"> html body {margin:0; } #wrap {list-style:none;padding:0;margin:30px auto;width:670px;position:relative;zoom:1; } .clearfix:after {content:'';height:0;clear:both;display:block;visibility:hidden; } #wrap div{float:left;margin:10px;z-index:1;border:1px solid #fff;_display:inline; } #wrap div img{width:200px;height:150px;vertical-align:bottom; } #wrap div.active {border:1px dashed red; } </style> </head> <body> <div id="wrap" class='clearfix'><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/1.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/2.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/3.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/4.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/5.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/6.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/7.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/8.jpg" /></div><div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/9.jpg" /></div> </div> <script type="text/javascript"> var o=document.getElementById("wrap"); var arr=o.getElementsByTagName("div"); var ind=2; for(var i=arr.length-1;i>=0;i--){arr[i].style.left=arr[i].offsetLeft+"px";arr[i].style.top=arr[i].offsetTop+"px"; arr[i].style.position="absolute";arr[i].style.margin=0;m(arr[i]) }//拖動和各種判斷 function m(obj){var tar=null;obj.onmousedown=function(e){if(obj.setCapture){obj.setCapture();}var e=e||event;ind++;var aa=[obj.offsetLeft,obj.offsetTop];var disX=e.clientX-obj.offsetLeft;var disY=e.clientY-obj.offsetTop;this.style.zIndex=ind;if(obj.setCapture){obj.setCapture}document.onmousemove=function(e){var e=e||event;obj.style.left=e.clientX-disX+"px";obj.style.top=e.clientY-disY+"px";var s=siblings(obj);var mind=9999999;var num=-1;for(var i=0;i<s.length;i++){s[i].className='';if(c(obj,s[i])){var dis=distance(obj,s[i]);if(mind>dis){mind=dis;num=i;for(j=0;j<siblings(obj).length;j++){siblings(obj)[j].className=''; }s[num].className="active";}}tar=s[num]}if(e.stopPropagation) {e.stopPropagation(); }else{ e.cancelBubble = true;}}document.onmouseup=function(){if(obj.releaseCapture){obj.releaseCapture();}if(tar){tar.className='';}exchangePosition(obj,tar,aa);tar=null;document.onmousemove=null;document.onmouseup=null;}return false;} }function exchangePosition(a,b,x){if(b){move(a,{left:b.offsetLeft,top:b.offsetTop});move(b,{left:x[0],top:x[1]});}else{move(a,{left:x[0],top:x[1]})} }//求兩個Div之間的距離 function distance(x,y){var l=x.offsetLeft;var t=x.offsetTop;var ll=y.offsetLeft;var tt=y.offsetTop;var dis=Math.sqrt((l-ll)*(l-ll)+(t-tt)*(t-tt));return dis }//碰撞檢測方法 function c(x,y){var l=x.offsetLeft;var r=l+x.offsetWidth;var t=x.offsetTop;var b=t+x.offsetHeight;var ll=y.offsetLeft;var rr=ll+y.offsetWidth;var tt=y.offsetTop;var bb=tt+y.offsetHeight;if(r<ll || b<tt || l>rr || t>bb){return false;}else{return true;} }function siblings(obj){return preall(obj).concat(nextall(obj)) }function preall(obj){var arr=[];var o=obj.previousSibling;while(o){if(o.nodeType==1){arr.unshift(o);}o=o.previousSibling;}return arr; }function nextall(obj){var arr=[];var o=obj.nextSibling;while(o){if(o.nodeType==1){arr.push(o);}o=o.nextSibling;}return arr; }function move(obj,json,fn){ clearInterval(obj.timer)obj.timer=setInterval(function(){obj.bstop=true;for(i in json){var pos=parseInt(getcss(obj,i));var speed=pos>json[i]?Math.floor(((json[i]-pos)/5)): Math.ceil(((json[i]-pos)/5));obj.style[i]=speed+pos+"px";if(parseInt(getcss(obj,i))!=json[i]){obj.bstop=false;}}if(obj.bstop){clearInterval(obj.timer);fn && fn();}},30) }function getcss(obj,attr){return (obj.currentStyle||getComputedStyle(obj, false))[attr]; }</script>
?
)
