JavaScript拖拽排序实现教程

<ul id="sortable-list">
  <li class="draggable" draggable="true">项目 1</li>
  <li class="draggable" draggable="true">项目 2</li>
  <li class="draggable" draggable="true">项目 3</li>
</ul>

.draggable {
  padding: 10px;
  margin: 5px 0;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}
<p>.draggable.dragging {
opacity: 0.5;
background: #bbdefb;
}</p>

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('sortable-list');
  let draggedItem = null;
<p>// 开始拖动
list.addEventListener('dragstart', (e) => {
draggedItem = e.target;
setTimeout(() => {
draggedItem.classList.add('dragging');
}, 0);
});</p><p>// 拖动过程中
list.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止，否则 drop 不会触发
const afterElement = getDragAfterElement(list, e.clientY);
const currentDragging = document.querySelector('.dragging');</p><pre class="brush:php;toolbar:false;">if (afterElement == null) {
  list.appendChild(currentDragging);
} else {
  list.insertBefore(currentDragging, afterElement);
}

});

// 结束拖动 list.addEventListener('drop', (e) => { e.preventDefault(); if (draggedItem) { draggedItem.classList.remove('dragging'); draggedItem = null; } });

// 辅助函数：判断鼠标在哪个元素之后 function getDragAfterElement(container, mouseY) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

return draggableElements.reduce((closest, child) => {
  const box = child.getBoundingClientRect();
  const offset = mouseY - box.top - box.height / 2;

  if (offset < 0 && offset > closest.offset) {
    return { offset: offset, element: child };
  } else {
    return closest;
  }
}, { offset: Number.NEGATIVE_INFINITY }).element;

} });