拖放API使用详解_实现可排序列表的完整方案

<font face="monospace">
<ul id="sortable-list">
  <li class="draggable-item" draggable="true" data-id="1">项目 1</li>
  <li class="draggable-item" draggable="true" data-id="2">项目 2</li>
  <li class="draggable-item" draggable="true" data-id="3">项目 3</li>
</ul>
</font>

<font face="monospace">
item.addEventListener('dragstart', function (e) {
  e.dataTransfer.setData('text/plain', e.target.dataset.id);
  e.target.classList.add('dragging');
});
</font>

<font face="monospace">
item.addEventListener('dragover', function (e) {
  e.preventDefault();
});
</font>

<font face="monospace">
item.addEventListener('drop', function (e) {
  e.preventDefault();
  const targetId = e.target.dataset.id;
  const draggedId = e.dataTransfer.getData('text/plain');

  if (targetId !== draggedId) {
    const list = document.getElementById('sortable-list');
    const draggedEl = list.querySelector(`[data-id="${draggedId}"]`);
    const targetEl = list.querySelector(`[data-id="${targetId}"]`);

    // 判断插入位置
    const targetIndex = Array.from(list.children).indexOf(targetEl);
    const draggedIndex = Array.from(list.children).indexOf(draggedEl);

    if (draggedIndex < targetIndex) {
      list.insertBefore(draggedEl, targetEl.nextSibling);
    } else {
      list.insertBefore(draggedEl, targetEl);
    }
  }
});
</font>

<font face="monospace">
item.addEventListener('dragend', function () {
  this.classList.remove('dragging');
});
</font>

<font face="monospace">
.draggable-item.dragging {
  opacity: 0.4;
  background: #b3d7ff;
}
</font>