照片墙拖动-2
效果：碰撞💥 检测 距离检测
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/move.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 #ul1 {margin: 50px auto 0; padding: 0; width:630px; position: relative;} 9 li {float: left; margin: 0 10px 10px 0; width: 200px; height: 150px; list-style: none;} 10 li img {display: block;} 11 </style> 12 <script type="text/javascript"> 13 window.onload=function() 14 { 15 var oul = document.getElementById("ul1"); 16 var ali = document.getElementsByTagName("li"); 17 var lilen = ali.length; 18 var zindex = 1; 19 //转换定位 20 // for (var i=0;i<lilen;i++) { 21 // ali[i].style.position = "absolute"; 22 // } 23 //创建一个数组保存 每个图片的位置 24 var picwz =[]; 25 for (var i=0;i<lilen;i++) { 26 picwz.push({ 27 left:ali[i].offsetLeft, 28 top:ali[i].offsetTop 29 }) 30 } 31 for (var i=0;i<lilen;i++) { 32 ali[i].style.left = picwz[i].left +"px"; 33 ali[i].style.top = picwz[i].top +"px"; 34 ali[i].style.position = "absolute"; 35 drag(ali[i])//调用拖动图片函数 36 } 37 function drag(obj) 38 { 39 var disX = 0; 40 var disY = 0; 41 obj.onmousedown = function(ev) 42 { 43 var ev = ev || event; 44 disX = ev.clientX - obj.offsetLeft ; 45 disY = ev.clientY - obj.offsetTop ; 46 obj.style.zIndex = zindex++; 47 document.onmousemove = function(ev) 48 { 49 var ev = ev || event; 50 obj.style.left = ev.clientX - disX +"px"; 51 obj.style.top = ev.clientY - disY +"px"; 52 //碰撞检测 循环所以Li 排除自己与自己的碰撞💥 53 var pzArr = []; //每次move 初始为空 54 for (var i = 0 ; i< lilen;i++) { 55 if(obj != ali[i]) 56 { 57 pz(obj, ali[i]) && pzArr.push(ali[i]); 58 } 59 } 60 console.log(pzArr); 61 //拖动距离 算中心点 离哪一张图片的距离 62 //设计一个方法 距离最短 63 var o = getshort(obj,pzArr); 64 for (var i=0;i<lilen;i++) { 65 ali[i].style.border = "0px solid red"; 66 } 67 if(o) //如果o 存在 68 { 69 o.style.border = "4px solid red"; 70 console.log(o); 71 } 72 73 } 74 obj.onmouseup =function() 75 { 76 document.onmousemove = null; 77 obj.onmouseup = null; 78 } 79 return false; 80 } 81 //碰撞检测 82 function pz(obj1,obj2) 83 { 84 var L1 = obj1.offsetLeft; 85 var T1 = obj1.offsetTop; 86 var R1 = L1+ obj1.offsetWidth; 87 var B1 = T1+ obj1.offsetHeight; 88 var L2 = obj2.offsetLeft; 89 var T2 = obj2.offsetTop; 90 var R2 = L2+ obj1.offsetWidth; 91 var B2 = T2+ obj1.offsetHeight; 92 93 // if (R1<L2 || B1 < T2 || L1 > R2 || T1 > B2) { 94 // 95 // } 96 return !(R1<L2 || B1 < T2 || L1 > R2 || T1 > B2) 97 } 98 function getshort(obj,arr) 99 { 100 var o = null; 101 var pos = 100000; 102 for(var i =0;i<arr.length;i++) 103 { 104 var a = (obj.offsetTop + obj.offsetHeight/2) - (arr[i].offsetTop + arr[i].offsetHeight/2); 105 var b = (obj.offsetLeft+ obj.offsetWidth/2) - (arr[i].offsetLeft + arr[i].offsetWidth/2); 106 c =Math.sqrt(a*a + b*b); 107 if(c<pos) 108 { 109 pos = c; 110 o = arr[i]; //最小值 111 } 112 } 113 return o; 114 } 115 116 117 118 } 119 } 120 </script> 121 </head> 122 <body> 123 <ul id="ul1"> 124 <li><img src="photo/1.jpg" alt="" /></li> 125 <li><img src="photo/2.jpg" alt="" /></li> 126 <li><img src="photo/3.jpg" alt="" /></li> 127 <li><img src="photo/4.jpg" alt="" /></li> 128 <li><img src="photo/5.jpg" alt="" /></li> 129 <li><img src="photo/1.jpg" alt="" /></li> 130 <li><img src="photo/2.jpg" alt="" /></li> 131 <li><img src="photo/3.jpg" alt="" /></li> 132 <li><img src="photo/4.jpg" alt="" /></li> 133 </ul> 134 135 </body> 136 </html>
