解决Tauri2.x拖拽事件问题

发布时间： 2025-09-03 07:58:52

更新时间： 2025-09-03 12:29:52

🕒 阅读时间：3 min read 👀 阅读量：Loading...

前言

最近在使用 Tauri2.x 开发桌面应用时，遇到了一个棘手的问题：拖拽事件无法正常工作。经过一番调查和尝试，终于找到了解决方案。在这篇文章中，我将分享我的解决过程，希望能帮助到遇到类似问题的开发者。

问题描述

使用前端监听拖拽事件时，发现事件无法触发。例如

1
document.addEventListener('DOMContentLoaded', () => {
2
  const uploadZone = document.getElementById('file-upload-zone');
3
  const fileList = document.getElementById('file-list');
4

5
  uploadZone.addEventListener('dragover', (e) => {
6
    e.preventDefault();
7
    uploadZone.classList.add('drag-hover');
8
  });
9

10
  uploadZone.addEventListener('drop', (e) => {
11
    e.preventDefault();
12
    uploadZone.classList.remove('drag-hover');
13

14
    const files = Array.from(e.dataTransfer.files);
15
    displayFiles(files);
16
  });
17

18
  function displayFiles(files) {
19
    fileList.innerHTML = files.map(file =>
20
      `<div class="file-item">${file.name} (${file.size} bytes)</div>`
21
    ).join('');
22
  }
23
});

无论如何拖拽，控制台都没有任何输出。

解决方案

默认情况下，Tauri 配置

1
{
2
  "app": {
3
    "windows": [
4
      {
5
        "label": "main",
6
        "title": "wngtools",
7
        "width": 800,
8
        "height": 600,
9
        "resizable": true,
10
        "fullscreen": false,
11
        "dragDropEnabled": true //这个默认是true
12
        //Whether the drag and drop is enabled or not on the webview. By default it is enabled.
13
        //Disabling it is required to use HTML5 drag and drop on the frontend on Windows.
14
      }
15
    ],
16
    ...
17
  },
18
  ...
19
}

Tauri 的安全策略阻止了拖拽事件。默认情况下，前端事件被 Tauri 拦截，走它自己的事件

比如说tauri://drag-drop,tauri://drag-leave,tauri://drag-enter等。

那么方案就有两个，一个是声明"dragDropEnabled": false，这样前端的拖拽事件就能正常工作了。

但既然Tauri以权限控制与安全为主，我选择了第二个方案，使用 Tauri 提供的拖拽事件。

所以要把原有的拖拽事件改成 Tauri 的事件。

1
import { listen } from "@tauri-apps/api/event";
2
listen("tauri://drag-drop", (e) => {
3
  console.log("Dropped files:", e);
4
});
5
listen("tauri://drag-leave", () => {
6
  console.log("Drag leave");
7
});
8
listen("tauri://drag-enter", () => {
9
  console.log("Drag enter");
10
});

当我尝试拖拽文件到应用窗口时，控制台成功输出了拖拽的文件信息。控制台消息

当然，根据官方文档,Tauri:// 事件并不能监听到具体的 DOM 对象(~~当然，如果你喜欢用相对坐标来判断那我没话说~~)，所以如果你需要监听具体的 DOM 对象的拖拽事件，还是需要把dragDropEnabled设置为false,并且使用原生的DOM拖拽事件才能行。

参考