Tauri + Angular 16中HTML拖放异常：仅dragstart事件触发，其余无响应

核心解决方案步骤 #

1. 开启Tauri的拖放权限
   Tauri默认通过权限列表（allowlist）禁用了窗口的拖放功能，需要在tauri.conf.json中手动开启：

{
  "tauri": {
    "allowlist": {
      "window": {
        "dragDrop": true
      }
    }
  }
}

2. 完善dragStart事件的数据设置
   部分桌面环境/浏览器要求拖拽开始时必须设置dataTransfer的数据，否则不会触发后续的dragover和drop事件，修改组件的onDragStart方法：

onDragStart(event: DragEvent) {
    console.log("drag started", event);
    // 必须设置至少一项数据，确保拖拽操作被识别为有效
    event.dataTransfer?.setData('text/plain', '');
}

3. （可选）给dropzone添加可见样式
   为了确保拖拽区域可被识别，给dropzone添加基础样式（app.component.scss）：

#dropzone {
  border: 2px dashed #ccc;
  padding: 2rem;
  width: 300px;
  margin: 2rem 0;
  text-align: center;
}

原因解析 #

• Tauri的安全机制默认拦截了拖放事件，防止未授权的文件操作，因此必须在权限列表中显式开启dragDrop。
• 即使在纯HTML中正常运行，Tauri的桌面容器环境对拖拽操作有额外要求，必须设置dataTransfer数据才能触发后续事件链。
• 原生事件绑定无效的问题本质也是Tauri的权限拦截，而非事件绑定方式的问题。

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