用到的功能有：
- 布局转换（将float布局转换为定位布局）
- 图片拖拽效果的实现
- 碰撞检测
- 计算两点之间的斜线距离
- 找最小值
具体的实现在代码中我都有注释，嗯，直接上代码。
注：这里还需要有一个运动框架，需要的请点击js运动框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px; padding:0px;}
#box{width:340px; height:340px; margin:100px auto;}
#box img{width:100px; height:100px; margin-left:10px; margin-top:10px;}
</style>
</head>
<body>
<div id="box">
<img src="photo/a.jpg"/>
<img src="photo/b.jpg"/>
<img src="photo/c.jpg"/>
<img src="photo/d.jpg"/>
<img src="photo/e.jpg"/>
<img src="photo/f.jpg"/>
<img src="photo/g.jpg"/>
<img src="photo/h.jpg"/>
<img src="photo/j.jpg"/>
</div>
<script src="move.js"></script>
<script>
var oDiv = document.getElementById('box');
var aImg = oDiv.getElementsByTagName('img');
var arr=[];
var zIndex = 2;
for(var i=0; i<aImg.length; i++){//记录每一张图片的left和top的值
arr.push([aImg[i].offsetLeft,aImg[i].offsetTop]);
}
for(var i=0; i<aImg.length; i++){//布局转换，将float布局转换为定位布局
aImg[i].style.position = 'absolute';
aImg[i].style.left = arr[i][0]+'px';
aImg[i].style.top = arr[i][1]+'px';
aImg[i].style.margin = 0;
}
for(var i=0; i<aImg.length; i++){
aImg[i].index = i;
drag(aImg[i]);
}
function drag(obj){//为每一张图片设置拖拽的功能
obj.onmousedown = function(ev){
var ev = ev||event;
obj.style.zIndex = zIndex++;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
obj.style.left = ev.clientX - disX +'px';
obj.style.top = ev.clientY - disY + 'px';
for(var i=0; i<aImg.length; i++){
aImg[i].style.border = '';
}
if(bian(obj)){
bian(obj).style.border = '2px solid yellow';
}
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
var nImg = bian(obj);
var tem = 0;
if(nImg){
startMove(nImg,{left:arr[obj.index][0],top:arr[obj.index][1]});
startMove(obj,{left:arr[nImg.index][0],top:arr[nImg.index][1]});
tem = obj.index;//改变索引值
obj.index = nImg.index;
nImg.index = tem;
nImg.style.border = '';
}else{
startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});
}
}
return false;
}
}
function bian(obj){//找最小值
var value = 9999;
var index = -1;
for(var i=0; i<aImg.length; i++){
if(closer(obj,aImg[i])&&obj!=aImg[i]){
var c = getdis(obj,aImg[i]);
if(c<value){
value = c;
index = i;
}
}
}
if(index !=-1){
return aImg[index];
}else{
return false;
}
}
function getdis(obj1,obj2){//两点之间的距离
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}
function closer(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;
}
}
</script>
</body>
</html>