效果：随机数组 索引值改变
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>
知识点补充：
JavaScript随机打乱数组
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是随即出现的。所以数组就被随即排序了。*/
时间： 2024-08-09 06:33:54