javascript实现拖动元素交换位置

本文实例讲述了javascript实现拖动元素交换位置的代码。分享给大家供大家参考。具体如下：
实现目标：可拖动元素拖动到另外一个元素位置的时候，互相交换位置。
启发来源：最初形式是网上看到的一个拼图小游戏。

运行效果截图如下：

具体代码如下：
代码：

body,ul,li{margin:0;padding:0;}ul{list-style: none;}body{font:13px/1.5 Tahoma;}#box{position:relative;width:435px;height:580px;margin:10px auto;padding: 10px 5px 10px 10px;border: 1px solid #ccc;}#box li{float:left;width:80px;height:188px;overflow:hidden;background: #ccc;border: 1px solid #999;}#box li.hig{width:78px;height:186px;overflow:hidden;border:2px dashed blue;}

<ul id="box"></ul>

js代码：

var zIndex = 1;
window.onload = function（） {var oBox = document.getElementById（"box"）;var aLi = oBox.getElementsByTagName（"li"）;var aPos = [];var aData = [];for （i = 0; i < 15; i++）aData.push（i+1）;//插入结构var oFragment = document.createDocumentFragment（）;for （i = 0; i < aData.length; i++） {var oLi = document.createElement（"li"）;oFragment.appendChild（oLi）}oBox.appendChild（oFragment）;//布局转换for （i = 0; i < aLi.length; i++） {aLi[i].index = i;aLi[i].style.top = aLi[i].offsetTop + "px";aLi[i].style.left = aLi[i].offsetLeft + "px";aLi[i].style.margin = "0 5px 5px 0";aPos.push（{"left": aLi[i].offsetLeft,"top": aLi[i].offsetTop}）}for （i = 0; i < aLi.length; i++） {aLi[i].style.position = "absolute";drag（aLi[i]）}//拖拽函数function drag（obj, handle） {var handle = handle || obj;handle.style.cursor = "move";handle.onmousedown = function（event） {var event = event || window.event;var disX = event.clientX - this.offsetLeft;var disY = event.clientY - this.offsetTop;var oNear = null;obj.style.zIndex = zIndex++;document.onmousemove = function（event） {var event = event || window.event;var iL = event.clientX - disX;var iT = event.clientY - disY;var maxL = obj.parentNode.clientWidth - obj.offsetWidth;var maxT = obj.parentNode.clientHeight - obj.offsetHeight;iL < 0 && （iL = 0）;iT < 0 && （iT = 0）;iL > maxL && （iL = maxL）;iT > maxT && （iT = maxT）;obj.style.left = iL + "px";obj.style.top = iT + "px";for （i = 0; i < aLi.length; i++） aLi[i].className = "";oNear = findNearest（obj）;oNear && （oNear.className = "hig"）;return false};document.onmouseup = function（） {document.onmousemove = null;document.onmouseup = null;if （oNear） {var tIndex = obj.index;obj.index = oNear.index;oNear.index = tIndex;startMove（obj, aPos[obj.index]）;startMove（oNear, aPos[oNear.index], function（） {}）;oNear.className = "";} else {startMove（obj, aPos[obj.index]）}handle.releaseCapture && handle.releaseCapture（）};this.setCapture && this.setCapture（）;return false}}//找出相遇点中最近的元素function findNearest（obj） {var filterLi = [];var aDistance = [];for （i = 0; i < aLi.length; i++） aLi[i] ！= obj && （isButt（obj, aLi[i]） && （aDistance.push（getDistance（obj, aLi[i]））, filterLi.push（aLi[i]）））;var minNum = Number.MAX_VALUE;var minLi = null;for （i = 0; i < aDistance.length; i++） aDistance[i] < minNum && （minNum = aDistance[i], minLi = filterLi[i]）;return minLi}};//求两点之间的距离function getDistance（obj1, obj2） {var a = （obj1.offsetLeft + obj1.offsetWidth / 2） - （obj2.offsetLeft + obj2.offsetWidth / 2）;var b = （obj1.offsetTop + obj1.offsetHeight / 2） - （obj2.offsetTop + obj2.offsetHeight / 2）;return Math.sqrt（a * a + b * b）}//碰撞检测function isButt（obj1, obj2） {var l1 = obj1.offsetLeft;var t1 = obj1.offsetTop;var r1 = obj1.offsetLeft + obj1.offsetWidth;var b1 = obj1.offsetTop + obj1.offsetHeight;var l2 = obj2.offsetLeft;var t2 = obj2.offsetTop;var r2 = obj2.offsetLeft + obj2.offsetWidth;var b2 = obj2.offsetTop + obj2.offsetHeight;return ！（r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1）}//获取最终样式function getStyle（obj, attr） {return parseFloat（obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle（obj, null）[attr]）}//运动框架function startMove（obj, pos, onEnd） {clearInterval（obj.timer）;obj.timer = setInterval（function（） {doMove（obj, pos, onEnd）}, 30）}function doMove（obj, pos, onEnd） {var iCurL = getStyle（obj, "left"）;var iCurT = getStyle（obj, "top"）;var iSpeedL = （pos.left - iCurL） / 5;var iSpeedT = （pos.top - iCurT） / 5;iSpeedL = iSpeedL > 0 ? Math.ceil（iSpeedL） : Math.floor（iSpeedL）;iSpeedT = iSpeedT > 0 ? Math.ceil（iSpeedT） : Math.floor（iSpeedT）;if （pos.left == iCurL && pos.top == iCurT） {clearInterval（obj.timer）;onEnd && onEnd（）} else {obj.style.left = iCurL + iSpeedL + "px";obj.style.top = iCurT + iSpeedT + "px";}}

以上就是javascript实现拖动元素交换位置的全部代码，希望对大家的学习有所帮助。