H5页面如何实现拖拽排序功能 拖拽排序交互实现完整教程

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

const list = document.getElementById('sortable-list');
const items = list.querySelectorAll('li');

items.forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragover', handleDragOver);
  item.addEventListener('drop', handleDrop);
  item.addEventListener('dragend', handleDragEnd);
});

let draggedItem = null;

function handleDragStart() {
  draggedItem = this;
  setTimeout(() => {
    this.style.opacity = '0.5';
  }, 0);
}

function handleDragOver(e) {
  e.preventDefault();
  if (this !== draggedItem && this.parentNode === draggedItem.parentNode) {
    const referenceNode = (e.offsetY || e.layerY) > this.offsetHeight / 2 ? 'afterend' : 'beforebegin';
    this.parentNode.insertBefore(draggedItem, this.nextSibling || this);
  }
}

function handleDragEnd() {
  this.style.opacity = '1';
  draggedItem = null;
}

.drag-over {
  background-color: #f0f0f0;
  border: 2px dashed #999;
}

this.classList.add('drag-over');

function handleDrop() {
  // ...
  this.classList.remove('drag-over');
}