Svelte动态列表中Drop事件未触发问题排查

核心问题1：未阻止dragover的默认行为 #

浏览器默认会阻止元素被放置到其他元素上，必须在dragover事件处理函数里调用event.preventDefault()，否则drop事件永远不会触发——哪怕你加了console.log，没阻止默认行为也没用。

示例代码（父容器/子元素的事件处理）：

<div on:dragover={handleDragOver}>
  {#each items as item (item.id)}
    <div 
      contenteditable="true"
      draggable="true"
      data-id={item.id}
      on:dragstart={handleDragStart}
      on:dragover={handleDragOver}
      on:drop={handleDrop}
    >
      {item.content}
    </div>
  {/each}
</div>

<script>
function handleDragOver(e) {
  e.preventDefault(); // 关键：必须添加这一行
  e.dataTransfer.dropEffect = 'move'; // 控制拖拽光标样式
  console.log('dragover触发');
}

function handleDrop(e) {
  e.preventDefault(); // 避免默认行为干扰排序逻辑
  console.log('drop触发');
  // 后续处理列表重排序逻辑
}

function handleDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.dataset.id); // 必须设置拖拽数据
  e.target.classList.add('dragging');
}
</script>

核心问题2：未设置拖拽数据 #

dragstart事件里必须通过dataTransfer.setData()设置至少一项数据（哪怕是元素ID或空字符串），部分浏览器会因为没有拖拽数据而不触发后续drop事件。比如上面代码中传递被拖拽元素的ID，方便后续drop时识别目标元素。

核心问题3：contenteditable元素的默认行为干扰 #

contenteditable元素自带文本拖拽行为，可能和自定义拖拽冲突。可以在dragstart里额外阻止默认行为：

<div 
  contenteditable="true"
  draggable="true"
  on:dragstart={(e) => {
    e.preventDefault(); // 阻止contenteditable的默认文本拖拽
    e.dataTransfer.setData('text/plain', item.id);
  }}
>
  {item.content}
</div>

光标显示问题 #

要显示正确的拖拽光标，需在dragover事件中设置e.dataTransfer.dropEffect，可选值有'move'、'copy'、'link'，对应不同的光标样式，比如'move'会显示移动箭头。

额外检查点 #

• 确认动态列表的each循环中，每个元素都正确绑定了draggable="true"属性；
• 排查是否有CSS设置了pointer-events: none，该属性会阻止元素接收鼠标事件（包括拖拽事件）。

内容的提问来源于stack exchange，提问作者Jostal