Tauri Drag and Drop Issues on Windows

You may run into this very frustrating problem in your Tauri Windows app if you are trying to use both the OS-level drag and drop API and the HTML5 drag and drop API. TL;DR: As of writing, it’s impossible to use both APIs simultaneously, and there’s no clean way to work around it. See this issue. You can choose which one you want to use (on a per-window basis) via the dragDropEnabled property:

// from Tauri docs
"dragDropEnabled": {
    "description": "Whether drag and drop is enabled or not on the webview. By default it is enabled.\n\nDisabling it is required to use HTML5 drag and drop on the frontend on Windows.",
    "default": true,
    "type": "boolean"
},

Because dragDropEnabled is true by default, whenever you try to drag and drop an element in your webview on windows, you’ll see the not-allowed cursor 🚫.

Dragstart event handlers will fire, but dragover, drop, and dragleave will not. Drag and drop libraries like neodrag and dnd-svelte-kit will also not work properly.

To use OS-level file drag-and-drop, you can enable it either in your tauri.conf.json file or with the Rust window builder:

let window = WebviewWindowBuilder::new(
    app,
    "app",
    WebviewUrl::App(
        format!("app.html?dir={dir_path}", dir_path = dir_path).into(),
    ),
)
.disable_drag_drop_handler()
.build()

{
// tauri.conf.json
...
    "app": {
        "withGlobalTauri": true,
        "windows": [
            {
                "dragDropEnabled": true,
                "label": "main",
                "title": "Sound Stitch",
                "width": 1266,
                "height": 800
            },
            {
                "label": "debug",
                "title": "Debug",
                "width": 700,
                "height": 800,
                "url": "/debug"
            }
        ],
    }
...
}

I became a little curious as to why exactly this is a Windows-related issue. Basically, on Windows, dragDropEnabled = true installs a native Object Linking and Embedding (OLE) drag-and-drop handler. This handler captures and consumes drag events before the WebView can see them, effectively disabling the HTML5 drag & drop API. OLE on Windows is what enables applications to exchange objects/data via drag-and-drop, clipboard, and embedding, but it’s a legacy system. On Mac/Linux, the drag and drop is not consumed, so there’s not issue.

In 2022 Microsoft devs said they were “working on” the underlying issue, but no signs of any progress yet 😢.