首页 > 代码库 > 拖拽碰撞效果，全部搞定，果然闲的没事干
拖拽碰撞效果，全部搞定，果然闲的没事干
<!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); 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>
拖拽碰撞效果，全部搞定，果然闲的没事干
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。