<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>互换位置</title>
<style>
*{
padding: 0;
margin:0;
}
ul{
position: relative;
list-style: none;
width: 900px;
margin:0 auto;
}
li{
float: left;
margin:10px;
width: 280px;
height: 135px;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}
ul .active{
border:solid 1px red;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var aPos=[];
var iMinZindex=2;
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";
aLi[i].index=i;
}
for (var i = 0; i < aLi.length; i++) {
getDrag(aLi[i]);
}
//拖拽函数
function getDrag(obj){
obj.onmousedown=function(ev){
var oEvent=event || ev;
var disX=oEvent.clientX-obj.offsetLeft;
var disY=oEvent.clientY-obj.offsetTop;
obj.style.zIndex=iMinZindex++;
clearInterval(obj.timer);
document.onmousemove=function(ev){
var oEvent=event || ev;
obj.style.left=oEvent.clientX-disX+'px';
obj.style.top=oEvent.clientY-disY+'px';
for (var i = 0; i < aLi.length; i++) {
aLi[i].className="";
}
var oNear=findNearest(obj);
if (oNear) {
oNear.className="active";
}
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
var oNear=findNearest(obj);
if (oNear) {
oNear.className="";
oNear.style.zIndex=iMinZindex++;
obj.style.zIndex=iMinZindex++;
//交换位置
startMove(oNear,aPos[obj.index]);
startMove(obj,aPos[oNear.index]);
//交换索引值
var tem=0;
tem=obj.index;
obj.index=oNear.index;
oNear.index=tem;
}else{
startMove(obj,{left:aPos[obj.index].left,top:aPos[obj.index].top});
}
}
return false;
}
}
//碰撞检测
function cdText(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;
}
}
//获得两者之间距离
function getDis(obj1,obj2){
var a=obj1.offsetLeft-obj2.offsetLeft;
var b=obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(a*a+b*b);
}
//获取最小距离
function findNearest(obj){
//最小值初始化，随意一个值，不能太小；
var iMin=9999;
var iMinIndex=-1;
for (var i = 0; i < aLi.length; i++) {
if (obj==aLi[i]) continue;
if (cdText(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>
<ul id="ul1">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
<li><img src="7.jpg" alt=""></li>
<li><img src="8.jpg" alt=""></li>
<li><img src="9.jpg" alt=""></li>
<li><img src="10.jpg" alt=""></li>
<li><img src="11.jpg" alt=""></li>
<li><img src="12.jpg" alt=""></li>
</ul>
</body>
</html>成果展示：
