javascript拖拽元素互换位置，实现代码

以下是一个简单的 JavaScript 拖拽元素互换位置的实现代码，你可以根据自己的需要进行修改：

HTML 部分：

<div class="drag-container">
  <div class="drag-item" draggable="true">
    拖拽元素1
  </div>
  <div class="drag-item" draggable="true">
    拖拽元素2
  </div>
  <div class="drag-item" draggable="true">
    拖拽元素3
  </div>
</div>

CSS 部分：

.drag-container {
  display: flex;
}

.drag-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

JavaScript 部分：

const dragItems = document.querySelectorAll('.drag-item');
let dragItem = null;

// 获取元素距离页面左上角的距离
function getPosition(el) {
  let x = 0,
      y = 0;
  while (el !== null) {
    x += el.offsetLeft;
    y += el.offsetTop;
    el = el.offsetParent;
  }
  return { x, y };
}

// 判断两个元素是否相交
function isOverlap(el1, el2) {
  const el1Rect = el1.getBoundingClientRect();
  const el2Rect = el2.getBoundingClientRect();

  return !(
    el1Rect.bottom < el2Rect.top ||
    el1Rect.top > el2Rect.bottom ||
    el1Rect.right < el2Rect.left ||
    el1Rect.left > el2Rect.right
  );
}

// 获取拖拽元素的位置信息
function getItemPosition(item) {
  const { x, y } = getPosition(item);
  const width = item.offsetWidth;
  const height = item.offsetHeight;

  return { x, y, width, height };
}

// 交换两个元素的位置
function swapItems(item1, item2) {
  const parent = item1.parentNode;
  const temp = document.createElement('div');

  parent.insertBefore(temp, item1);
  parent.insertBefore(item1, item2);
  parent.insertBefore(item2, temp);

  parent.removeChild(temp);
}

// 拖拽事件处理函数
function handleDragStart(e) {
  dragItem = e.target;
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDragEnter(e) {
  e.preventDefault();
  if (isOverlap(dragItem, e.target)) {
    e.target.style.border = '2px dashed red';
  }
}

function handleDragLeave(e) {
  e.target.style.border = '';
}

function handleDrop(e) {
  e.preventDefault();
  e.target.style.border = '';
  if (isOverlap(dragItem, e.target)) {
    const item1 = dragItem;
    const item2 = e.target;

    swapItems(item1, item2);
  }
}

// 绑定拖拽事件监听器
dragItems.forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('dragenter', handleDragEnter);
  item.addEventListener('dragleave', handleDragLeave);
  item.addEventListener('drop', handleDrop);
});

上述代码实现了拖拽元素的互换位置，基本思路是通过拖拽事件监听器来获取拖拽元素和目标元素的位置信息，并根据位置信息判断是否需要交换位置。交换位置时，使用一个临时元素来占位，然后将两个元素互换位置即可。