其中ul标签给了margin：50px auto；是为了方便，在IE7-无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="十七-vikang" />
<title>十七 - http://www.jianshu.com/u/626b6b7f6b78</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#ul1 {
width: 516px;
overflow: hidden;
margin: 50px auto;
}
#ul1 li {
width: 150px;
height: 150px;
float: left;
margin: 10px;
border: 1px solid #000;
background-color: aqua;
text-align: center;
font-size: 100px;
line-height: 150px;
color: blue;
}
#ul1 li img {
width: 100%;
height: 100%;
}
</style>
<script>
function getStyle(obj,name){
return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}
function move(obj,json,opitions){
//opitions={ duration,easing,complete}
opitions = opitions || {};
opitions.duration = opitions.duration || '800';
opitions.easing = opitions.easing || 'ease-in';
clearInterval(obj.timer);
//json={width:0,height:0};
var start = {};
//json={width:200,height:200};
var dis= {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name]-start[name];
}
var count = Math.floor(opitions.duration/30);
var n = 0;
obj.timer = setInterval(function(){
n++
for(var name in json){
switch(opitions.easing){
case 'linear':
var a = n/count;
var cur = dis[name]*a;
break;
case 'ease-in':
var a = n/count;
var cur = dis[name]*a*a*a;
break;
case 'ease-out':
var a = 1-n/count;
var cur = dis[name]*(1-a*a*a);
break;
}
/*var a = n/count;
var cur = dis[name]*a;*/
if(name=='opacity'){
obj.style[name]=start[name]+cur;
obj.style.filter='alpha(opacity:'+(start[name]+cur)*100+')';
}else{
obj.style[name]=start[name]+cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
opitions.complete && opitions.complete();
}
},30);
}
</script>
<script>
// 获取两个物体之间的距离
function getDis(obj1,obj2) {
var l1 = obj1.offsetLeft + obj1.offsetWidth/2;
var t1 = obj1.offsetTop + obj1.offsetHeight/2;
var l2 = obj2.offsetLeft + obj2.offsetWidth/2;
var t2 = obj2.offsetTop + obj2.offsetHeight/2;
var a = l2 - l1;
var b = t2 - t1;
return Math.sqrt(a*a+b*b);
}
// 碰撞检测
function collTest(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 || t1 > b2 || r1 < l2 || b1 < t2) {
return false;
} else {
return true;
}
}
window.onload = function() {
var oUl = document.getElementById('ul1');
var aLi = oUl.children;
var oBtn = document.getElementById('btn1');
var zIndex = 1000;
// 布局转化
var aPos = [];
for (var i = 0; i < aLi.length; i++) {
aPos[i] = {
left: aLi[i].offsetLeft,
top: aLi[i].offsetTop
};
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.left = aPos[i].left + 'px';
aLi[i].style.top = aPos[i].top + 'px';
aLi[i].style.position = 'absolute';
aLi[i].style.margin = 0;
}
// 拖拽
for (var i = 0; i < aLi.length; i++) {
drag(aLi[i]);
aLi[i].index = i;
}
// 随机换位置
oBtn.onclick = function() {
aPos.sort(function() {
return Math.random() - 0.5;
});
for (var i = 0; i < aLi.length; i++) {
move(aLi[i], aPos[aLi[i].index]);
}
};
function drag(obj) {
obj.onmousedown = function(ev) {
var oEvent = ev || event;
zIndex++;
// 保证当前拖拽的物体在最上面
obj.style.zIndex = zIndex;
var disX = oEvent.clientX - obj.offsetLeft;
var disY = oEvent.clientY - obj.offsetTop;
document.onmousemove = function(ev) {
var oEvent = ev || event;
obj.style.left = oEvent.clientX - disX + 'px';
obj.style.top = oEvent.clientY - disY + 'px';
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.border = '1px solid #000';
}
var oNear = findNearest(obj);
if (oNear) {
oNear.style.border = '3px dashed #f60';
}
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
var oNear = findNearest(obj);
if (oNear) {
// 碰到了 要换位置
// obj -> oNear
// oNear -> obj
move(oNear, aPos[obj.index]);
move(obj, aPos[oNear.index]);
// 交换索引位置
var temp;
temp = oNear.index;
oNear.index = obj.index;
obj.index = temp;
oNear.style.border = '1px solid #000';
} else {
// 没有找到最近的物体 回到原来的位置
move(obj, aPos[obj.index]);
}
obj.releaseCapture && obj.releaseCapture();
};
obj.setCapture && obj.setCapture();
return false;
};
}
function findNearest(obj) {
var iMin = 999999999;
var iMinIndex = -1;
for (var i = 0; i < aLi.length; i++) {
if (obj == aLi[i]) continue;
// 判断当前物体跟哪些物体有碰撞
if (collTest(obj,aLi[i])) {
// 求两个物体之间的距离
var dis = getDis(obj,aLi[i]);
if (iMin > dis) {
iMin = dis;
iMinIndex = i;
}
}
}
if (iMinIndex == -1) {
return null;
} else {
return aLi[iMinIndex];
}
}
};
</script>
</head>
<body>
<input type="button" value="随机换一下" id="btn1" />
<ul id="ul1">
<li><!--<img src="" alt="">-->1</li>
<li><!--<img src="" alt="">-->2</li>
<li><!--<img src="" alt="">-->3</li>
<li><!--<img src="" alt="">-->4</li>
<li><!--<img src="" alt="">-->5</li>
<li><!--<img src="" alt="">-->6</li>
<li><!--<img src="" alt="">-->7</li>
<li><!--<img src="" alt="">-->8</li>
<li><!--<img src="" alt="">-->9</li>
</ul>
</body>
</html>
