最短距离依然不对,每天改一次,一直改到对,我就不信了,丫丫个配的
2014-09-12 07:55
239 查看
<!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 num=-1; 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); for(var i=0;i<s.length;i++){ s[i].className=''; if(c(obj,s[i])){ var mind=99999; var dis=distance(obj,s[i]); if(mind>dis){ mind=dis; num=i; } } } if(num>-1){ s[num].className="active"; } } document.onmouseup=function(){ exchangePosition(obj,siblings(obj)[num],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"; } } //求两个Div之间的距离 function distance(x,y){ var l=x.offsetLeft+x.offsetWidth/2; var t=x.offsetTop+x.offsetHeight/2; var ll=y.offsetLeft+y.offsetWidth/2; var tt=y.offsetTop+y.offsetHeight/2; 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>
相关文章推荐
- hdoj 2083 简易版之最短距离 水过~
- 1063 sicily (木有准确理解题意,一直wrong error)——不过这事快速排序的一次复习,还是记录一下
- 两数组最短距离 acm
- HDU2083简易版之最短距离
- Dijkstra算法求最短距离并输出路径(Java实现)
- 已知两点的经纬度,求某点到该两点的连线的最短距离
- LeetCode 317. Shortest Distance from All Buildings(最短建筑距离)
- 简易版之最短距离
- 字符串的修改(动态规划-最短编辑距离)
- 谷歌2014年中国区校园招聘B轮题目二(求N个矩形内的所有点到其中一点的街区距离之和最短)解法探讨与代码实现(C++)
- GMA Round 1 最短距离
- UVA Tree's a Crowd(三维空间的点求最短距离)
- A1046 Shortest Distance 最短距离
- [LeetCode]Word Ladder 最短距离字符串转换 (Dijkstra)
- 简易版之最短距离
- POJ 3608 Bridge Across Islands(旋转卡壳 求不相交凸包之间的最短距离)
- 图论02—随意两点间最短距离及路径(经典)
- poj3608(旋转卡壳求两凸包间的最短距离)
- 最短编辑距离
- 点到线段的最短距离