tauri: Can not render HTML5 drag & drop

Describe the bug Hey and thanks alot for the awesome work you guys do on this project! well the thing is I have spend quite some time trying to figure out why I cant do drag and drop like using vuejs and the lib called vuedraggable or even raw html5 drag and drop. elements are not draggable inside tauri window and if I serve the dev-serve for the browser it renders as it should , in both chrome and edage? so if any of you guys can point me in the right direction would it be highly appreciated To Reproduce Steps to reproduce the behavior: `<template> <draggable :list=“list” @start=“draggable = true” @end=“draggable = false”> <div v-for="x in list" :key="x.id"> {{ x.title }} </div> </draggable> </template>

example is just a vue componet using vuedraggable

Expected behavior elements are draggable 😃

Platform and Versions (please complete the following information):

OS:Windows10 Node: v14.4.0 NPM:6.14.9 Yarn: Rustc: 1.52.1

Stack Trace None

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 30 (21 by maintainers)

Commits related to this issue

feat(core): allow disabling file drop handler, closes #2014 — committed to tauri-apps/tauri by lucasfernog 3 years ago

Most upvoted comments

I am seeing this happen on macOS, too. My app was not seeing its DOM “drop” event handler called until I disabled fileDropEnabled in “tauri.conf.json”:

{
  "tauri": {
    "windows": [
      {
        "fileDropEnabled": false

The documentation should probably be updated since it only mentions this happening on Windows.

caldwell on Feb 25, 2023

@IAmJulianAcosta I’m not 100%, i basically just repeated what the tao/wry guys told me. But as far as i understand it, the issue is that the file drop handler is implemented in tao “covering” the whole window and it’s not possible (yet?) to propagate the drag events into the webview after/while handling (potential) file dragging.

I didn’t reallyyy look into the relevant source code yet, so it’s pretty vague, sry 😅

FabianLars on May 10, 2022

that is the same as doing it in wry, and last time I did, it didn’t behave as expected, I will give it another go today

amrbashir on Mar 15, 2023

I think you’re mixing things up here. This issue is about dragging html elements around (think about trello for example) not for dropping files. For file dropping you need fileDropEnabled set to true (the default), the array should contain the file paths then. Keep in mind that you currently have to decide between file dropping and HTML5 drag-n-drop, they can’t work at the same time (hopfully just for now).

FabianLars on May 8, 2022

@IAmJulianAcosta That depends on how you create your windows

in tauri.conf.json there’s https://tauri.studio/docs/api/config#tauri.windows.fileDropEnabled

in js:

new WebviewWindow('label', {fileDropEnabled: false})

in rust:

tauri::window::WindowBuilder::new(app, "label", WindowUrl::App("index.html".into()))
    .disable_file_drop_handler()
    .build()?;

FabianLars on May 3, 2022