以上是一个九宫格，要想实现元素的拖拽和互换，如点击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>