Svelte 拖放操作时 on:drop 事件无法被调用的问题排查

你漏了HTML原生拖拽API强制要求的关键配置：

• 浏览器默认会把所有元素的拖拽放置行为拦截掉，哪怕你绑了on:drop事件，只要没有额外处理，拖拽动作悬停到元素上的时候，浏览器就会直接判定“不允许在这里放”，根本不会派发drop事件。
• 只有在接收放置的元素上，对dragover事件调用preventDefault()阻止浏览器的默认拦截，这个元素才会被判定为合法的放置区域，后续的drop事件才有可能触发。

修复方式 #

给接收拖拽的div补上对应的事件处理，修改后的完整代码片段：

<script>
</script>
<div 
  on:dragover={(event) => event.preventDefault()}
  on:drop={(event) => {
    // 顺带阻止drop的默认行为，避免浏览器误把拖拽内容当链接/文件打开
    event.preventDefault()
    console.log("drop")
  }}
>
  drop on me
</div>
<div class="drag" draggable={true}>drag me</div>
<style>
    div {
        padding: 20px;
        margin: 10px;
        background: #fee;
    }
    .drag {
        cursor:grab;
        background: #efe;
    }
</style>

实用注意点 #

• 在drop事件里同样执行event.preventDefault()，可以规避Chrome等浏览器的默认行为：比如拖拽文本/链接的时候，直接跳转到对应地址的异常问题
• 如果需要在拖拽过程中传递自定义数据，只要在可拖拽元素的dragstart事件里，通过event.dataTransfer.setData()存储内容，后续在drop事件里读取对应字段即可拿到传递的数据

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