javascript实现拖动元素交换位置

这篇文章主要介绍了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;}

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  maxL && (iL = maxL); iT > maxT && (iT = maxT); obj.style.left = iL + "px"; obj.style.top = iT + "px"; for (i = 0; i  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实现拖动元素交换位置的全部代码，希望对大家的学习有所帮助。

以上就是javascript实现拖动元素交换位置的详细内容，更多请关注0133技术站其它相关文章！