js实现div拖拽互换位置效果

实现 div 拖拽互换位置效果，可以通过以下步骤来实现：

1. 给需要拖拽的 div 添加 mousedown 事件监听器，当鼠标按下时记录鼠标的位置和当前拖拽的 div 的位置。
2. 给 document 添加 mousemove 事件监听器，在拖拽过程中更新当前拖拽的 div 的位置。
3. 给 document 添加 mouseup 事件监听器，当鼠标抬起时判断当前拖拽的 div 是否与其他 div 重叠，如果重叠则互换它们的位置。

以下是一个示例代码：

HTML：

<div class="drag" style="left: 0px; top: 0px;">Div 1</div>
<div class="drag" style="left: 100px; top: 100px;">Div 2</div>

CSS：

.drag {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  cursor: move;
}

JavaScript：

var dragDiv = null; // 记录当前拖拽的 div

document.addEventListener('mousedown', function(event) {
  if (event.target.classList.contains('drag')) {
    dragDiv = event.target;
    dragDiv.style.zIndex = 1; // 设置当前拖拽的 div 在最上层
    dragDiv.style.opacity = 0.5; // 设置当前拖拽的 div 半透明
    dragDiv.startX = event.clientX;
    dragDiv.startY = event.clientY;
    dragDiv.startLeft = parseInt(dragDiv.style.left);
    dragDiv.startTop = parseInt(dragDiv.style.top);
  }
});

document.addEventListener('mousemove', function(event) {
  if (dragDiv) {
    var deltaX = event.clientX - dragDiv.startX;
    var deltaY = event.clientY - dragDiv.startY;
    dragDiv.style.left = (dragDiv.startLeft + deltaX) + 'px';
    dragDiv.style.top = (dragDiv.startTop + deltaY) + 'px';
  }
});

document.addEventListener('mouseup', function(event) {
  if (dragDiv) {
    dragDiv.style.zIndex = 0; // 恢复被拖拽的 div 的层级
    dragDiv.style.opacity = 1; // 恢复被拖拽的 div 的透明度
    var dragRect = dragDiv.getBoundingClientRect();
    var allDivs = document.querySelectorAll('.drag');
    for (var i = 0; i < allDivs.length; i++) {
      if (allDivs[i] !== dragDiv) {
        var rect = allDivs[i].getBoundingClientRect();
        if (dragRect.left < rect.right && dragRect.right > rect.left &&
            dragRect.top < rect.bottom && dragRect.bottom > rect.top) {
          // 交换位置
          var tempLeft = dragDiv.style.left;
          var tempTop = dragDiv.style.top;
          dragDiv.style.left = allDivs[i].style.left;
          dragDiv.style.top = allDivs[i].style.top;
          allDivs[i].style.left = tempLeft;
          allDivs[i].style.top = tempTop;
          break;
        }
      }
    }
    dragDiv = null;
  }
});