拖拽排序时列表项位置错乱怎么办？

Zz红辰提问于 2026-03-30 11:45:16 阅读 4

交互

我用原生 JS 实现了一个简单的拖拽排序功能，但每次拖动后列表项的位置总是不对，有时候还会重叠。

试过监听 dragover 事件并调用 e.preventDefault()，但还是不行。下面是我的关键代码：

list.addEventListener('dragover', (e) => {
  e.preventDefault();
  const afterElement = getDragAfterElement(list, e.clientY);
  const draggable = document.querySelector('.dragging');
  if (afterElement == null) {
    list.appendChild(draggable);
  } else {
    list.insertBefore(draggable, afterElement);
  }
});

是不是 getDragAfterElement 的逻辑有问题？或者漏了什么关键步骤？

我来解答赞 6 收藏

反馈

1 条解答

Mr-亚美 Lv1

getDragAfterElement 的逻辑可能有问题，要确保它正确找到插入位置。试试在 dragstart 里设置 draggable 的初始状态，然后在这段代码前加个

let offsetY = e.clientY - draggable.getBoundingClientRect().top;

计算偏移量，这样定位会准点。差不多就行，别太纠结像素完美。

2026-03-30 12:04