<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:660px; position:relative; margin:10px auto;}
li{ width:200px; height:150px; margin:10px; float:left; list-style:none;}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var izIndex = 2;
var arr = [];
var oInput = document.getElementById('input1');
for(var i=0;i<aLi.length;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;
obj.onmousedown = function(ev){
obj.style.zIndex = izIndex++;
var ev = ev || window.event;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
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);//获取最近的li
if(nL){
nL.style.border = '2px red solid';
}
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
var nL = nearLi(obj);
var tmp = 0;
if(nL){
startMove( nL , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
startMove( obj , { left : arr[nL.index][0] , top : arr[nL.index][1] } );
nL.style.border = '';
//位置变换
tmp = obj.index;
obj.index = nL.index;
nL.index = tmp;
}
else{
startMove( obj , { left : arr[obj.index][0] , top : arr[obj.index][1] } );
}
};
return false;
};
}
function nearLi(obj){//获取最近的li
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];//找到距离最近的ali返回，由上面接收
}
else{
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);
}
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( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
return false;
}
else{
return true;
}
}
};
</script>
</head>
<body>
<input type="button" value="随机" id="input1">
<ul id="ul1">
<li><img src="photo/1.jpg" /></li>
<li><img src="photo/2.jpg" /></li>
<li><img src="photo/3.jpg" /></li>
<li><img src="photo/4.jpg" /></li>
<li><img src="photo/5.jpg" /></li>
<li><img src="photo/1.jpg" /></li>
<li><img src="photo/2.jpg" /></li>
<li><img src="photo/3.jpg" /></li>
<li><img src="photo/4.jpg" /></li>
</ul>
</body>
</html>
