javascript - 如何使用 vanilla javascript 进行拖放？

Question

我已经使用 vanilla javascript 编写了用于拖放的代码。当我选择第一个 div 时，它会在我尝试下一个移动时自动移动到最后一个。
我不想使用 jquery 库。
我尝试的是创建充当容器的主 div，以便在该容器内每个 div 都可以轻松移动
我附上了我尝试过的东西，但我不明白为什么会这样。

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.mainContainer')

draggables.forEach(draggable => {
  draggable.addEventListener('dragstart', () => {
    draggable.classList.add('dragging')
  })

  draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
  })
})

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

function getDragAfterElement(container, y) {
  const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

  return draggableElements.reduce((closest, child) => {
    const box = child.getBoundingClientRect()
    const offset = y - box.top - box.height / 2
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child }
    } else {
      return closest
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element
}

body {
  font-family: sans-serif;
}

.mainContainer {
  padding: 6px 0;
  width: 100%;
}

.draggable {
  cursor: move;

  display: inline-block;
  margin: 0 6px;
  z-index: 1;

  color: #fff;
  background-color: #087ee5;
  border: 1px solid #0675d6;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
  max-width: 300px;
  min-width: 30px;
  border-collapse: separate;
  vertical-align: middle;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.draggable.dragging {
  opacity: 0.5;
}

<div class="mainContainer">
      <p class="draggable" draggable="true">MOVE 1</p>
      <p class="draggable" draggable="true">MOVE 2</p>
      <p class="draggable" draggable="true">MOVE 3</p>
      <p class="draggable" draggable="true">MOVE 4</p>
    </div>

Answer 1

为鼠标悬停时的可拖动对象添加事件监听器。
检查可拖动对象是否已经在您手中。
如果不是在鼠标悬停的节点之后追加可拖动的节点
将拖动元素的位置更改为绝对位置，并通过顶部和左侧定义其位置 x 和 y