<ul id="ul1"><li><img src="data:images/1.jpg" width="200" height="150" /></li><li><img src="data:images/2.jpg" width="200" height="150" /></li><li><img src="data:images/3.jpg" width="200" height="150" /></li><li><img src="data:images/4.jpg" width="200" height="150" /></li><li><img src="data:images/5.jpg" width="200" height="150" /></li><li><img src="data:images/6.jpg" width="200" height="150" /></li></ul>

  *{margin: 0;padding: 0;list-style: none;}#ul1{width: 660px;position: relative;margin: 10px auto;}#ul1 li{width: 200px;height: 150px;float: left;list-style: none;margin: 10px;}#ul1 li:hover{border-color: #9a9fa4;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}#ul1 .active{border: 1px dashed red;}

  window.onload = function () {var oUl = document.getElementById("ul1");var aLi = oUl.getElementsByTagName("li");var disX = 0;var disY = 0;var minZindex = 1;var aPos = [];for (var i = 0; i < aLi.length; i++) {var t = aLi[i].offsetTop;var l = aLi[i].offsetLeft;aLi[i].style.top = t + "px";aLi[i].style.left = l + "px";aPos[i] = { left: l, top: t };aLi[i].index = i;}for (var i = 0; i < aLi.length; i++) {aLi[i].style.position = "absolute";aLi[i].style.margin = 0;setDrag(aLi[i]);}//拖拽function setDrag(obj) {obj.onmouseover = function () {obj.style.cursor = "move";}obj.onmousedown = function (event) {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;obj.style.zIndex = minZindex++;//当鼠标按下时计算鼠标与拖拽对象的距离disX = event.clientX + scrollLeft - obj.offsetLeft;disY = event.clientY + scrollTop - obj.offsetTop;document.onmousemove = function (event) {//当鼠标拖动时计算div的位置var l = event.clientX - disX + scrollLeft;var t = event.clientY - disY + scrollTop;obj.style.left = l + "px";obj.style.top = t + "px";/*for(var i=0;i<aLi.length;i++){aLi[i].className = "";if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线if(colTest(obj,aLi[i])){aLi[i].className = "active";}}*/for (var i = 0; i < aLi.length; i++) {aLi[i].className = "";}var oNear = findMin(obj);if (oNear) {oNear.className = "active";}}document.onmouseup = function () {document.onmousemove = null; //当鼠标弹起时移出移动事件document.onmouseup = null; //移出up事件，清空内存//检测是否普碰上，在交换位置var oNear = findMin(obj);if (oNear) {oNear.className = "";oNear.style.zIndex = minZindex++;obj.style.zIndex = minZindex++;startMove(oNear, aPos[obj.index]);startMove(obj, aPos[oNear.index]);//交换indexoNear.index += obj.index;obj.index = oNear.index - obj.index;oNear.index = oNear.index - obj.index;} else {startMove(obj, aPos[obj.index]);}}clearInterval(obj.timer);return false; //低版本出现禁止符号
                }}//碰撞检测function colTest(obj1, obj2) {var t1 = obj1.offsetTop;var r1 = obj1.offsetWidth + obj1.offsetLeft;var b1 = obj1.offsetHeight + obj1.offsetTop;var l1 = obj1.offsetLeft;var t2 = obj2.offsetTop;var r2 = obj2.offsetWidth + obj2.offsetLeft;var b2 = obj2.offsetHeight + obj2.offsetTop;var l2 = obj2.offsetLeft;if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {return false;} else {return true;}}//勾股定理求距离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 findMin(obj) {var minDis = 999999999;var minIndex = -1;for (var i = 0; i < aLi.length; i++) {if (obj == aLi[i]) continue;if (colTest(obj, aLi[i])) {var dis = getDis(obj, aLi[i]);if (dis < minDis) {minDis = dis;minIndex = i;}}}if (minIndex == -1) {return null;} else {return aLi[minIndex];}}}