tauri: [bug] drag and drop not working in webkit

Describe the bug

hi there,

i created a grapesjs project with tauri. i have Arch Linux so to create a tauri application i have to install webkit2gtk package. after creating a project i noticed that drag and drop functionally not working in that webview. i also tried the same application in different browsers like chrome, Firefox and also in safari too which itself uses webkit the application work’s successfully in all other browsers but can’t able to work in the webview that was given by the tauri.

Reproduction

create a simple tauri appliation with create-tauri-app CLI
run that application with pnpm tauri dev
when the webview appears. inspact that
in the console write location.replace("https://grapesjs.com/demo.html") it will open a page where you can see a demo grapesjs editor.
try to drag components and drop it in the given canvas. (here is the issue we can’t able to do that)

Expected behavior

the components just simply drag from block manager and drop in the canvas.

Platform and versions

Environment
  › OS: Arch Linux Unknown X64
  › Node.js: 18.15.0
  › npm: 9.5.0
  › pnpm: 8.1.1
  › yarn: Not installed!
  › rustup: 1.25.2
  › rustc: 1.68.1
  › cargo: 1.68.1
  › Rust toolchain: stable-x86_64-unknown-linux-gnu

Stack trace

No response

Additional context

No response

About this issue

Original URL
State: open
Created a year ago
Comments: 23 (5 by maintainers)

Most upvoted comments

This issue is caused by a bug upstream (https://bugs.webkit.org/show_bug.cgi?id=265857).

It may be worked around with a script similar to the following, after the elements have been created:

let draggableElements = document.querySelectorAll('[draggable="true"]');
            draggableElements.forEach((el) => {
                el.addEventListener("dragstart", (ev) => {
                    ev.dataTransfer.setData("text/plain", ev.target.id);
                });
            });

Natrocx on Dec 8, 2023

Is there any way to change the default webview to something else, like Chrome?

No, we’re stuck with webkitgtk for now.

FabianLars on May 31, 2023

If the application uses HTML5 DnD you have to set the fileDropEnabled field in tauri.conf.json to false otherwise such drag and drop will not work on Windows. Check the issue #2014 to see what I mean.

astudentinearth on Apr 24, 2023