javascript - 如何进行平滑的可排序拖放？

Question

我创建了一个代码，用于按可能的顺序对单词列表进行排序，但有时它表现得非常好。

我已经获取了鼠标事件的水平坐标，然后使用它计算了偏移以获得更好的位置。

我是否需要添加任何其他内容或我在计算偏移量时缺少的内容

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

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.clientX)
    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.right - box.width / 2
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child }
    } else {
      return closest
    }
  }, { offset: Number.NEGATIVE_INFINITY }).element
}

.container {
  background-color: #333;
  padding: 1rem;
  margin-top: 1rem;
}

.draggable {
  display: inline-flex;
  padding: 1rem;
  background-color: white;
  border: 1px solid black;
  cursor: move;
  margin: 0.4rem;
}

.draggable.dragging {
  opacity: .5;
}

<div class="container">
  <span class="draggable" draggable="true">every  </span>
  <span class="draggable" draggable="true">so</span>
  <span class="draggable" draggable="true">beautiful</span>
  <span class="draggable" draggable="true">thing</span>
  <span class="draggable" draggable="true">is</span>
</div>

标签： javascript