<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/move.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#ul1 {
width: 540px;
position: relative;
margin: 10px auto;
}
li {
width: 160px;
height: 120px;
margin: 10px;
float: left;
list-style: none;
}
li img {
width: 160px;
height: 120px;
}
</style>
</head>
<body>
<input id='input1' type="button" value="随机"/>
<ul id="ul1">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
<li><img src="img/8.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
<script>
window.onload = function() {
var aLi = document.getElementsByTagName('li');
var oInput=document.getElementById('input1');
var arr = [];
for (var i = 0, len = aLi.length; i < len; i++) {
arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
};
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = 'absolute';
aLi[i].style.left = arr[i][0] + 'px';
aLi[i].style.top = arr[i][1] + 'px';
aLi[i].style.margin = '0';
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
drag(aLi[i]);
}
//随机位置
oInput.onclick=function(){
var randomArr=[0,1,2,3,4,5,6,7,8];
randomArr.sort(function(n1,n2){return Math.random()-0.5})
for (var i=0;i<aLi.length;i++){
startMove(aLi[i],{left:arr[randomArr[i]][0],top:arr[randomArr[i]][1]})
aLi[i].index=randomArr[i];
}
}
//拖拽切换位置
function drag(obj) {
var disX = 0;
var disY = 0;
var nrL = 0;
var nrT = 0;
var objL = obj.offsetLeft;
var objT = obj.offsetTop;
obj.onmousedown = function(ev) {
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
obj.style.zIndex = obj.style.zIndex + 2;
document.onmousemove = function(ev) {
var ev = ev || window.event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.border = '';
}
var nL = nearLi(obj);
if (nL) {
nL.style.border = 'solid 2px red';
}
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
var nL = nearLi(obj);
if (nL) {
var nLL = nL.offsetLeft;
var nLT = nL.offsetTop;
startMove(nL, {
left: arr[obj.index][0],
top: arr[obj.index][1]
})
startMove(obj, {
left: arr[nL.index][0],
top: arr[nL.index][1]
})
var tmp = 0;
tmp = nL.index;
nL.index = obj.index;
obj.index = tmp;
nl.style.border = '';
} else {
startMove(obj, {
left: arr[obj.index][0],
top: arr[obj.index][1]
})
}
}
return false;
};
};
//计算两个元素左上角的距离
function jl(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(a * a + b * b);
}
//找到距离最近的li
function nearLi(obj) {
var value = 9999;
var index = -1;
for (var i = 0; i < aLi.length; i++) {
if (pz(obj, aLi[i]) && obj != aLi[i]) {
var c = jl(obj, aLi[i]);
if (c < value) {
value = c;
index = i;
}
}
}
if (index != -1) {
return aLi[index];
} else {
return false;
}
}
};
//拖拽
//2个元素碰撞检测
function pz(obj1, obj2) {
var L1 = obj1.offsetLeft;
var R1 = obj1.offsetLeft + obj1.offsetWidth;
var T1 = obj1.offsetTop;
var B1 = obj1.offsetTop + obj1.offsetHeight;
var L2 = obj2.offsetLeft;
var R2 = obj2.offsetLeft + obj2.offsetWidth;
var T2 = obj2.offsetTop;
var B2 = obj2.offsetTop + obj2.offsetHeight;
if (L1 > R2 || R1 < L2 || T1 > B2 || B1 < T2) {
return false;
} else {
return true;
}
}
//判断最小值和他的位置
/*var arr=[20,98,4,5,84,23]
var index=-1;
var value=9999;
for(var i=0;i<arr.length;i++)
{
if(arr[i]<value){
value=arr[i];
index=i;
}
}
alert('最大值是:'+value+'位置是:'+index)*/
</script>
</body>
</html>
浙公网安备 33010602011771号