JS如何实现拖放排序_JavaScript拖放排序功能实现与交互逻辑教程

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', this.textContent);
    this.classList.add('dragging');
  });
});

const container = document.getElementById('list-container');
<p>container.addEventListener('dragover', function(e) {
e.preventDefault(); // 必须阻止默认行为才能 drop
const dragging = document.querySelector('.dragging');
const afterElement = getDragAfterElement(container, e.clientY);
if (afterElement == null) {
container.appendChild(dragging);
} else {
container.insertBefore(dragging, afterElement);
}
});</p><p>function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('li: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, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}

item.addEventListener('dragend', function() {
  this.classList.remove('dragging');
});

function getCurrentOrder() {
  return Array.from(document.querySelectorAll('#list-container li')).map(li => li.textContent);
}