21. 拖拽排序：Drag & Drop API

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

拖动下面的产品卡片调整顺序。

三、知识点提醒

拖拽排序的核心是“记录源 ID + 找到目标 ID + 重排数组”。
`dragover` 中必须 `preventDefault()`，否则 drop 可能不会触发。
移动端拖拽需要额外处理 touch 事件或使用成熟库。

四、练习建议

增加拖拽中的高亮样式。
把排序结果保存到 localStorage。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/21-drag-drop-sortable.js，下面同步展示，方便学习和复制。

// 页面 21：Drag & Drop 拖拽排序
let dragItems = [
  { id: 1, name: 'Decking' },
  { id: 2, name: 'Wall Panel' },
  { id: 3, name: 'Fencing' },
  { id: 4, name: 'Railing' }
];
const dragList = document.querySelector('#p21-list');
const dragOutput = document.querySelector('#p21-output');
let draggingId = null;

function renderDragList() {
  dragList.innerHTML = dragItems.map((item) => `
    <div class="item-card" draggable="true" data-id="${item.id}" style="margin-bottom:10px; cursor:grab;">
      ☰ ${item.name}
    </div>
  `).join('');
  dragOutput.textContent = '当前顺序：' + dragItems.map((item) => item.name).join(' → ');
}

function moveItem(sourceId, targetId) {
  const sourceIndex = dragItems.findIndex((item) => item.id === sourceId);
  const targetIndex = dragItems.findIndex((item) => item.id === targetId);
  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) return;

  const [removed] = dragItems.splice(sourceIndex, 1);
  dragItems.splice(targetIndex, 0, removed);
  renderDragList();
}

dragList.addEventListener('dragstart', (event) => {
  const item = event.target.closest('[data-id]');
  if (!item) return;
  draggingId = Number(item.dataset.id);
  event.dataTransfer.effectAllowed = 'move';
});

dragList.addEventListener('dragover', (event) => {
  event.preventDefault();
});

dragList.addEventListener('drop', (event) => {
  event.preventDefault();
  const target = event.target.closest('[data-id]');
  if (!target) return;
  moveItem(draggingId, Number(target.dataset.id));
});

renderDragList();