<!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; } #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){ 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; 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] } } document.onmouseup=function(){ 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){ a.style.left=b.offsetLeft+"px"; a.style.top=b.offsetTop+"px"; b.style.left=x[0]+"px"; b.style.top=x[1]+"px"; }else{ a.style.left=x[0]+"px"; a.style.top=x[1]+"px"; } b=null; } //求两个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; } </script>
ie6-8还没有搞定，主要是在拖动的时候首先动的是图片，需要事件捕获，正好又趁这个机会仔仔细细的研究一下js的冒泡的时间捕获，完整的做一个效果确实可以学习很多的知识。
加了一个运动效果
低级浏览器下面还是没有搞定，一点一点的添加一点一点的完善吧
<!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){ 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(e.stopPropagation) { e.stopPropagation(); }else{ e.cancelBubble = true; } 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(tar){ tar.className=''; } exchangePosition(obj,tar,aa); tar=null; document.onmousemove=null; document.onmouseup=null; } return false; } } function exchangePosition(a,b,x){ if(b){ //a.style.left=b.offsetLeft+"px"; //a.style.top=b.offsetTop+"px"; //b.style.left=x[0]+"px"; //b.style.top=x[1]+"px"; 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(this.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)/8)): Math.ceil(((json[i]-pos)/8)); 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 getComputedStyle(obj,null)[attr]||obj.currentStyle()[attr]; } </script>