JavaScript拖拽排序实现教程

  
项目 1
  
项目 2
  
项目 3

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

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('sortable-list');
  let draggedItem = null;
// 开始拖动
list.addEventListener('dragstart', (e) => {
draggedItem = e.target;
setTimeout(() => {
draggedItem.classList.add('dragging');
}, 0);
});
// 拖动过程中
list.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止，否则 drop 不会触发
const afterElement = getDragAfterElement(list, e.clientY);
const currentDragging = document.querySelector('.dragging');
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;
}
});