以上是一个九宫格，要想实现元素的拖拽和互换，如点击A到E的位置是，A会拖拽到E的位置，E会自动返回到A的位置；代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格拖拽与交换</title>
</head>
<style type="text/css">
#content{width: 300px;height:300px;margin: 0 auto;position: relative;}
#content div{width: 100px;height: 100px; float: left;line-height: 100px;text-align: center;font-size:40px; font-weight: 900; color: black; cursor: pointer; position: absolute;}
#content div:nth-child(1){background-color: #f05b72; top:0; left: 0;border: 1px solid;border-radius: 20px; }
#content div:nth-child(2){ background-color: #faa755; top:0; left:100px;border: 1px solid;border-radius: 20px;}
#content div:nth-child(3){background-color: #2585a6; top:0; left: 200px;border: 1px solid;border-radius: 20px;}
#content div:nth-child(4){background:#5ce4fd; top:100px;left: 0;border: 1px solid;border-radius: 20px; }
#content div:nth-child(5){ background:#f61acf; top:100px;left: 100px;border: 1px solid;border-radius: 20px; }
#content div:nth-child(6){ background:#3ef9bd; top:100px; left: 200px;border: 1px solid;border-radius: 20px; }
#content div:nth-child(7){ background:#9af93e;top:200px; left: 0;border: 1px solid;border-radius: 20px;}
#content div:nth-child(8){background:#eef93e; top:200px;left: 100px;border: 1px solid;border-radius: 20px; }
#content div:nth-child(9){ background:#f9843e; top:200px; left:200px;border: 1px solid;border-radius: 20px; }
#content .draging{ position: absolute;}
</style>
<body>
<div id="content">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
</div>
<script type="text/javascript">
var content = document.getElementById(‘content‘);
var items = content.querySelectorAll(‘div‘);
console.log(items);
function itemBox(itemName){
itemName.onmousedown = function(evt1){
var e = evt1 || window.event;
var cloneDiv = document.createElement(‘div‘);
cloneDiv.innerHTML = itemName.innerHTML;
cloneDiv.style.backgroundColor = getComputedStyle(itemName).backgroundColor;
cloneDiv.className = ‘draging‘;
cloneDiv.style.top = itemName.offsetTop +‘px‘;
cloneDiv.style.left = itemName.offsetLeft+‘px‘
content.appendChild(cloneDiv);
var offsetX = evt1.pageX - cloneDiv.offsetLeft;
var offsetY = evt1.pageY - cloneDiv.offsetTop;
document.onmousemove = function(evt){
var e2 = evt || window.event;
cloneDiv.style.left = evt.pageX - offsetX +‘px‘;
cloneDiv.style.top = evt.pageY -offsetY+‘px‘
}
document.onmouseup = function(){
document.onmousemove = null;
var divs = content.getElementsByTagName(‘div‘);
console.log(divs.length)
var min = 800;
var minDiv = null;
for(var i=0;i<divs.length-1;i++){
var div = divs[i];
var dis = distance(cloneDiv,div);
if(dis <= min){
min = dis;
minDiv = div;
}
}
var tmpInnerHTMl = minDiv.innerHTML;
minDiv.innerHTML = itemName.innerHTML;
itemName.innerHTML = tmpInnerHTMl;
var tmpColor = getComputedStyle(minDiv).backgroundColor;
minDiv.style.backgroundColor = getComputedStyle(itemName).backgroundColor;
itemName.style.backgroundColor = tmpColor;
content.removeChild(cloneDiv)
document.onmouseup = null;
}
return false;
}
}
for(var i = 0; i < items.length; i++){
itemBox(items[i]);
}
function distance(div1,div2) {
var a = div1.offsetLeft - div2.offsetLeft;
var b = div1.offsetTop - div2.offsetTop;
var c = Math.sqrt(a*a+b*b);
return c;
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/CH-cnblogs/p/11481820.html
时间： 2024-11-08 08:27:04