这篇文章主要介绍“JavaScript如何实现九宫格拖拽效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现九宫格拖拽效果”文章能帮助大家解决问题。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
}
#wrap div{
position: absolute;
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script type="text/javascript">
//生成结构
var oWrap = document.getElementById("wrap");
var mt = ml = 10;
for(var i = 0; i < 3; i++){
for(var j = 0; j < 3; j++){
var oDiv = document.createElement("div");
oWrap.appendChild(oDiv);
oDiv.style.top = i*(oDiv.offsetHeight + mt) + "px";
oDiv.style.left = j*(oDiv.offsetWidth + ml) + "px";
oDiv.style.backgroundColor = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
}
}
var arr = "ABCDEFGHI";
var aItems = oWrap.children;
var len = aItems.length;
for(var i = 0; i < aItems.length; i++){
aItems[i].innerHTML = arr[i];
}
//拖拽及交换位置
for(var i = 0; i < aItems.length; i++){
aItems[i].onmousedown = function(e){
var evt = e || event;
var x = evt.offsetX;
var y = evt.offsetY;
/*var x = evt.clientX - this.offsetLeft - oWrap.offsetLeft;
var y = evt.clientY - this.offsetTop - oWrap.offsetTop;*/
var _this = this;
var cloneNode = this.cloneNode();
cloneNode.style.border = '1px dashed #cecece';
this.style.zIndex = 1;
oWrap.replaceChild(cloneNode,this);
oWrap.appendChild(this);
document.onmousemove = function(e){
var evt = e || event;
var _left = evt.clientX - x - oWrap.offsetLeft;
var _top = evt.clientY - y - oWrap.offsetTop;
_this.style.left = _left + "px";
_this.style.top = _top + "px";
return false;
}
document.onmouseup = function(){
//交换位置
var disArr = [];
var newArr = [];
console.log(aItems.length);
for(var i = 0; i < len; i++){
var disX = _this.offsetLeft - aItems[i].offsetLeft;
var disY = _this.offsetTop - aItems[i].offsetTop;
var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
disArr.push(dis);
newArr.push(dis);
}
disArr.sort(function(a,b){
return a-b;
})
var minIndex = newArr.indexOf(disArr[0]);
_this.style.left = aItems[minIndex].style.left;
_this.style.top = aItems[minIndex].style.top;
aItems[minIndex].style.left = cloneNode.style.left;
aItems[minIndex].style.top = cloneNode.style.top;
oWrap.removeChild(cloneNode);
document.onmousemove = null;
document.onmouseup = null;
}
}
}
/*var arr = [45,32,11,90];
var minVal = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minVal);
console.log(minVal,arr,minIndex);*/
</script>
</body>
</html>效果图
关于“JavaScript如何实现九宫格拖拽效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
