标签：
效果：随机数组 索引值改变
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 btn = document.getElementById("btn"); 16 var oul = document.getElementById("ul1"); 17 var ali = document.getElementsByTagName("li"); 18 var lilen = ali.length; 19 var zindex = 1; 20 21 //转换定位 22 // for (var i=0;i<lilen;i++) { 23 // ali[i].style.position = "absolute"; 24 // } 25 //创建一个数组保存 每个图片的位置 26 var picwz =[]; 27 for (var i=0;i<lilen;i++) { 28 picwz.push({ 29 left:ali[i].offsetLeft, 30 top:ali[i].offsetTop 31 }) 32 } 33 for (var i=0;i<lilen;i++) { 34 ali[i].index = i; //为了回到原来的位置增加的索引值 35 ali[i].style.left = picwz[i].left +"px"; 36 ali[i].style.top = picwz[i].top +"px"; 37 ali[i].style.position = "absolute"; 38 drag(ali[i])//调用拖动图片函数 39 } 40 function drag(obj) 41 { 42 var disX = 0; 43 var disY = 0; 44 var o = null; 45 obj.onmousedown = function(ev) 46 { 47 var ev = ev || event; 48 disX = ev.clientX - obj.offsetLeft ; 49 disY = ev.clientY - obj.offsetTop ; 50 obj.style.zIndex = zindex++; 51 document.onmousemove = function(ev) 52 { 53 var ev = ev || event; 54 obj.style.left = ev.clientX - disX +"px"; 55 obj.style.top = ev.clientY - disY +"px"; 56 //碰撞检测 循环所以Li 排除自己与自己的碰撞?? 57 var pzArr = []; //每次move 初始为空 58 for (var i = 0 ; i< lilen;i++) { 59 if(obj != ali[i]) 60 { 61 pz(obj, ali[i]) && pzArr.push(ali[i]); 62 } 63 } 64 console.log(pzArr); 65 //拖动距离 算中心点 离哪一张图片的距离 66 //设计一个方法 距离最短 67 o = getshort(obj,pzArr); 68 for (var i=0;i<lilen;i++) { 69 ali[i].style.border = "0px solid red"; 70 } 71 if(o) //如果o 存在 72 { 73 o.style.border = "4px solid red"; 74 console.log(o); 75 } 76 77 } 78 obj.onmouseup =function() 79 { 80 document.onmousemove = null; 81 obj.onmouseup = null; 82 //判断是否有碰撞 83 if(!o) 84 { //回到原来的位置 85 //alert(obj.index); 86 move(obj,{ 87 left:picwz[obj.index].left, 88 top:picwz[obj.index].top 89 },1000,"backOut") 90 }else{ 91 o.style.border =""; 92 var p1 = picwz[obj.index]; 93 var p2 = picwz[o.index]; 94 //移动图片 95 move(obj,{ 96 left:p2.left, 97 top:p2.top 98 },1000,"backOut") 99 //被移动图片 100 move(o,{ 101 left:p1.left, 102 top:p1.top 103 },1000) 104 //由于索引没有变化 就需要替换 105 //设置第三方变量存 index 106 var _index = obj.index; 107 obj.index = o.index; 108 o.index = _index; 109 } 110 } 111 return false; 112 } 113 //碰撞检测 114 function pz(obj1,obj2) 115 { 116 var L1 = obj1.offsetLeft; 117 var T1 = obj1.offsetTop; 118 var R1 = L1+ obj1.offsetWidth; 119 var B1 = T1+ obj1.offsetHeight; 120 var L2 = obj2.offsetLeft; 121 var T2 = obj2.offsetTop; 122 var R2 = L2+ obj1.offsetWidth; 123 var B2 = T2+ obj1.offsetHeight; 124 // if (R1<L2 || B1 < T2 || L1 > R2 || T1 > B2) { 125 // } 126 return !(R1<L2 || B1 < T2 || L1 > R2 || T1 > B2) 127 } 128 function getshort(obj,arr) 129 { 130 var o = null; 131 var pos = 100000; 132 for(var i =0;i<arr.length;i++) 133 { 134 var a = (obj.offsetTop + obj.offsetHeight/2) - (arr[i].offsetTop + arr[i].offsetHeight/2); 135 var b = (obj.offsetLeft+ obj.offsetWidth/2) - (arr[i].offsetLeft + arr[i].offsetWidth/2); 136 c =Math.sqrt(a*a + b*b); 137 if(c<pos) 138 { 139 pos = c; 140 o = arr[i]; //最小值 141 } 142 } 143 return o; 144 } 145 //随机数 146 btn.onclick=function() 147 { 148 var arr =[]; 149 for (var i = 0; i<lilen;i++) { 150 arr.push(i); 151 } 152 arr.sort(function(){ 153 return Math.random() - 0.5 154 }) 155 console.log(arr);//随机数组中[2, 3, 0, 1, 4, 5, 7, 8, 6] 156 157 for (var i = 0; i<lilen;i++) { 158 var posindex = arr[i];//随机数组中[2, 3, 0, 1, 4, 5, 7, 8, 6] 159 ali[i].index = posindex; //这一步非常重要 索引 根据变化的值而变化 160 move(ali[i],{ 161 left:picwz[posindex].left, 162 top:picwz[posindex].top 163 },1000,"backOut") 164 } 165 } 166 } 167 } 168 </script> 169 </head> 170 <body> 171 <input type="button" value="随机" id="btn" /> 172 <ul id="ul1"> 173 <li><img src="photo/1.jpg" alt="" /></li> 174 <li><img src="photo/2.jpg" alt="" /></li> 175 <li><img src="photo/3.jpg" alt="" /></li> 176 <li><img src="photo/4.jpg" alt="" /></li> 177 <li><img src="photo/5.jpg" alt="" /></li> 178 <li><img src="photo/1.jpg" alt="" /></li> 179 <li><img src="photo/2.jpg" alt="" /></li> 180 <li><img src="photo/3.jpg" alt="" /></li> 181 <li><img src="photo/4.jpg" alt="" /></li> 182 </ul> 183 184 </body> 185 </html>
知识点补充：
1 var arr = [4,1,67,12,45,121,3]; 2 arr.sort(function() { 3 return (0.5-Math.random()); 4 })
代码
arr.sort(function(){ return 0.5 - Math.random() })
//sort 是对数组进行排序
//他的是这样工作的。每次从数组里面挑选两个数 进行运算。
//如果传入的参数是0 两个数位置不变。
//如果参数小于0 就交换位置
//如果参数大于0就不交换位置
//接下来用刚才的较大数字跟下一个进行比较。这样循环进行排序。
/*恰好。我们利用了这一点使用了0.5 - Math.random 这个运算的结果要么是大于0,要么是小于0.这样要么交换位置，要么不交换位置。当然大于或者小于0是随即出现的。所以数组就被随即排序了。*/
标签：
原文地址：http://www.cnblogs.com/h5monkey/p/5850579.html
