解决Tauri2.x拖拽事件问题

前言

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

问题描述

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

ts 复制代码
document.addEventListener('DOMContentLoaded', () => {
  const uploadZone = document.getElementById('file-upload-zone');
  const fileList = document.getElementById('file-list');

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

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

    const files = Array.from(e.dataTransfer.files);
    displayFiles(files);
  });

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

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

解决方案

默认情况下,Tauri 配置

json 复制代码
{
  "app": {
    "windows": [
      {
        "label": "main",
        "title": "wngtools",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false,
        "dragDropEnabled": true //这个默认是true
        //Whether the drag and drop is enabled or not on the webview. By default it is enabled.
        //Disabling it is required to use HTML5 drag and drop on the frontend on Windows.
      }
    ],
    ...
  },
  ...
}

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

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

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

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

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

ts 复制代码
import { listen } from "@tauri-apps/api/event";
listen("tauri://drag-drop", (e) => {
  console.log("Dropped files:", e);
});
listen("tauri://drag-leave", () => {
  console.log("Drag leave");
});
listen("tauri://drag-enter", () => {
  console.log("Drag enter");
});

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

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

参考

解决Tauri2.x拖拽事件问题

作者: xingwangzhe

本文链接: xingwangzhe.fun/posts/aed59...

本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

相关推荐
用户214118326360217 小时前
Qwen 3-VL 实测:从图片生代码到视频提字幕,这个多模态模型有多能打?
前端
寒山李白17 小时前
npm镜像源配置指南
前端·npm·node.js
GeniuswongAir18 小时前
Flutter实现滑动页面停留吸附
前端·javascript·flutter
颜酱18 小时前
基于Antd的SchemaForm 的表单复杂配置
前端·javascript·ant design
专注VB编程开发20年19 小时前
vb.net COM DLL 示例,实现了所有 VB6 X86 数据类型的对应
开发语言·前端·vb.net·com·vb6·activex dll
要加油哦~19 小时前
vue 构建工具如何选择 | vue-cli 和 vite的区别
前端·javascript·vue.js
李剑一19 小时前
为了免受再来一刀的痛苦,我耗时两天开发了一款《提肛助手》
前端·vue.js·rust
红尘散仙20 小时前
使用 Tauri Plugin-Store 实现 Zustand 持久化与多窗口数据同步
前端·rust·electron
沙白猿20 小时前
npm启动项目报错“无法加载文件……”
前端·npm·node.js
tyro曹仓舒20 小时前
彻底讲透as const + keyof typeof
前端·typescript