[bug] Partial HTML Drag is not work

[LuXts]

Describe the bug

I'm writing a vue3 tauri project with typescript. The behavior of the executable packaged with tauri is not consistent with the browser preview. In the API for HTML drag, only the dragstart and dragend work for me. The other don't trigger at all.

Work:

• ondragstart
• ondragend

Not Work:

• ondragenter
• ondragleave
• ondragover
• ondrop

Not tested:

• ondragexit

I have set "fileDropEnabled":false.

Reproduction

run:

vue create test
cd test
vue add tauri
yarn tauri:serve

HTML Example:

<ul>
        <li
            draggable="true"
            ondragstart="console.log('start')"
            ondragenter="console.log('enter')"
            ondragend="console.log('end')"
            ondragover="console.log('over')"
            ondragleave="console.log('leave')"
            ondrop="console.log('drop')"
        >
            item1
        </li>
        <li
            draggable="true"
            ondragstart="console.log('start')"
            ondragenter="console.log('enter')"
            ondragend="console.log('end')"
            ondragover="console.log('over')"
            ondragleave="console.log('leave')"
            ondrop="console.log('drop')"
        >
            item2
        </li>
</ul>

Drag item1 onto item2.

firefox output:

start
enter
over
enter
leave
over
leave
end

tauri output:

start
end

There is no Drop in this example.

Expected behavior

No response

Platform and versions

Operating System - Arch Linux, version Rolling Release X64

Node.js environment
  Node.js - 17.3.0
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 8.3.2
  yarn - 1.22.17

Rust environment
  rustc - 1.56.1
  cargo - 1.56.0

App directory structure
/src
/public
/.git
/node_modules
/src-tauri

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - Set automatically by Vue CLI plugin
  devPath - Set automatically by Vue CLI plugin
  framework - Vue.js (Vue CLI)
  bundler - Webpack

Stack trace

No response

Additional context

My English isn't very good, please forgive me.

[JamesYeoman]

Huh. That's really interesting. The app that I'm working on uses react and react-beautiful-dnd as a drag-and-drop framework. react-beautiful-dnd uses the html drag api under the hood, and I haven't noticed any bugs when dragging. Even the ondragover event fires correctly (I have a border on my drop component when a drag item is dragged over it).

Maybe try compiling my app locally to see if it's something to do with your webview provider? Go into the /src-tauri folder and run cargo tauri dev (the vite dev server takes about 10 seconds once the tauri window appears before it emits the html).

If you drag any of the list items, you should see a green outline around the list itself, and if you drag the item off of the list, the outline should go and the list should collapse to fill the space that the item took. If that all works fine for you, then either react-beautiful-dnd lied to me about using the html drag-and-drop api under the hood, or something more weird is going on in configuration somewhere for you.

Either way, please update us when you have some answers

[LuXts]

@JamesYeoman
I have run your project, but something strange is happening. The program reloads repeatedly and very fast. i can't even distinguish the content. But you have suggested a good idea. I tried using vuedraggable. it worked. I'm guessing that the libraries modify some property, but I don't know much about that. I spent a few hours working on it, but didn't make much progress.

This is a example.

// Here is the code that does not work.

<draggable> //  This is the component of vuedraggable.
    // Here is the same code working.
</draggable>

Also I tried to open the previous code using epiphany and found it had the exact same problem. This may be a problem with webkit. It has a different implementation of dragging than the others.

[JamesYeoman]

@LuXts repeatedly loading? Really odd... maybe it's your arch installation that's the cause here. Maybe try running an ubuntu VM and running both the projects in that VM?

[amrbashir]

This because of a conflict with fileDropEnabled.
you have two options:

1. disable fileDropEnabled on your window but you won't get native file drop events.
2. keep fileDropEnabled and use a dragging component that has a fallback js implementation like react-beautiful-dnd.

Currently we are not aware of a fix to this conflict, so I am gonna close this issue.

[FabianLars]

@amrbashir quote from the initial issue:

I have set "fileDropEnabled":false.

The weird/bad thing is that some drag events work but not all.

[amrbashir]

sorry, didn't see they tried "fileDropEnabled":false but anyhow, I doubt we can do anything here so I will keep the issue closed but please try running your example in epiphany browser and see if the events work correctly; if it does, let me know and I will reopen the issue.

[wesin]

@JamesYeoman the main window is ok, but when you open a new window, then the drag is disable.

[w-ensink]

I have this problem as well, using react-dnd. I also fixed it by setting "fileDropEnabled": false. When this option is left default, the drop callback is not called, all the other events are called like the should. When I use Safari, Chrome or Firefox the drop callback is called correctly.

It says in the documentation that "fileDropEnabled": false is required on Windows only, but it seems to be required on macOS too...

[ghost]

I ran into the same issue when I used react-dnd on my Mac
I didn't have to drop the file, so I was able to fix the problem by setting fileDropEnabled to false. thank you very much

[fpgaminer]

Same here, onDrop events weren't firing. Seems like a real bug to me? Maybe this issue should be re-opened.

Environment
› OS: Mac OS 12.6.0 X64
› Node.js: 18.10.0
› npm: 8.19.2
› pnpm: Not installed!
› yarn: Not installed!
› rustup: 1.25.1
› rustc: 1.64.0
› cargo: 1.64.0
› Rust toolchain: stable-aarch64-apple-darwin

Packages
› @tauri-apps/cli [NPM]: 1.1.1
› @tauri-apps/api [NPM]: 1.1.0
› tauri [RUST]: 1.1.1,
› tauri-build [RUST]: 1.1.1,
› tao [RUST]: 0.14.0,
› wry [RUST]: 0.21.1,

App
› build-type: bundle
› CSP: unset
› distDir: ../dist
› devPath: http://localhost:1420/
› framework: React

App directory structure
├─ dist
├─ node_modules
├─ public
├─ src-tauri
├─ .vscode
├─ assets
└─ src