[bug] drag and drop not working in webkit

[gxanshu]

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

1. create a simple tauri appliation with create-tauri-app CLI
2. run that application with pnpm tauri dev
3. when the webview appears. inspact that
4. in the console write location.replace("https://grapesjs.com/demo.html") it will open a page where you can see a demo grapesjs editor.
5. 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

[amrbashir]

did you try disabling fileDropEnabled in tauri.conf.json? https://tauri.app/v1/api/config/#windowconfig.filedropenabled

[gxanshu]

now can't able to drop. after setting fileDropEnabled to false the compound will get back to the position from where it start's dragging.

[amrbashir]

Not sure I understand what you mean, could record a comparison of the tauri app behavior and chrome for example?

[gxanshu]

gitcompletetutorial-2023-04-13_23.27.37.webm

[amrbashir]

@aianshume thanks for the video, could you try Gnome Web or Epiphany browsers and see if they have that issue as well?

[gxanshu]

here is the same issue in Epiphany browser gitcompletetutorial-2023-04-14_06.00.41.webm

[astudentinearth]

If you are planning Windows distribution I strongly recommend using a Drag-Drop library that uses a JavaScript backend. HTML5 based DnD won't work on Windows with fileDropEnabled. I ended up using dnd-kit for my React app.

Completely unrelated, but may I ask what dock you are using :)

[gxanshu]

i don't get it what you wanna to say but but as a cross platform native app my goal is to distribute the entire application for all the platforms not specific for windows. and i can't use any other library for Drag-drop because grapesJS is not my written code its a JS library and they use HTML5 DnD so how can i change that ?

[astudentinearth]

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.

[gxanshu]

i don't have any idea related to Windows currently i have Linux installed in my system. the this is the windows configrations in tauri.conf.json but still DnD not working in my Linux

[ryang14]

I'm having the exact same issue. Also using Linux with fileDropEnabled set to false.

[gxanshu]

Hi,

I'm creating a Tauri app that uses a lot of drag-and-drop functionality. I've noticed that the drag-and-drop functionality doesn't work very well in the default webview. Is there any way to change the default webview to something else, like Chrome?

[FabianLars]

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

No, we're stuck with webkitgtk for now.

[gxanshu]

https://github.com/GrapesJS/grapesjs/issues/5083

same issue in Grapesjs. Another user reported the same issue in the past.

[byawitz]

Hey, I have the same problem in

• MacOS
• Windows

In both of them there's no way to make Tauri supports Drag-N-Drop is Tauri doesn't supports drag-n-drop?

[FabianLars]

@byawitz Disable fileDropEnabled as shown above, then it should work. If it still doesn't work (and you're sure you disabled it for the correct window in case you have multiple) then maybe your frontend is acting up in some way.

[byawitz]

Thanks @FabianLars it worked 👍👍 I'm taking my question back

[barribarrier]

Hi. Same problem but only on Linux.

With fileDropEnabled set to false:

• Windows: Works
• Linux: Doesn't work

[kurdin]

@FabianLars I have the same problem but only when I create a Release build on MacOs. Very strange but dev build works just fine.

Here is how I create an app window in rust, nothing fancy

      let window = tauri::WindowBuilder::new(
        app,
        "main", /* the unique window label */
        tauri::WindowUrl::App("index.html".into()),
      )
      .min_inner_size(600.0, 500.0)
      .disable_file_drop_handler()
      .visible(false)
      .build()?;

again, on dev, no issues with drag and drop in the window but when I build a release app with tauri build the drag and drop stoped working with the same code. Any help would be appreciated!

[kurdin]

To anyone facing the the issue, the problem is not window manager or OSes differences, for me, it was a security csp setting needed to be updated for tauri app in tauri.config.json

Here is my current settings that makes native HTML5 drag and drop working fine in the release build.

    "security": {
      "csp": {
        "default-src": "'self' customprotocol: asset:",
        "connect-src": "ipc: https://ipc.localhost",
        "img-src": "'self' asset: https://asset.localhost blob: data:",
        "style-src": "'unsafe-inline' 'self' asset: https://asset.localhost"
      }
    }

and don't forget to app .disable_file_drop_handler() in rust or fileDropEnabled: false in tauri.config.json as an option for your app window.

[gxanshu]

are you using grapesjs too ?

[kurdin]

@gxanshu no, I am not using grapesjs.

[Natrocx]

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);
                });
            });

[sdhull]

I'm not sure if this is the issue, but can confirm drag & drop does not work in Safari (this is true for all of the grapejs demos). Interestingly, dragging new elements in does work but then you can no longer reposition them after they've been dragged in.

[kurdin]

@sdhull best solution I found for my app is to open a new window (separate html file) and use it as drop zone with standard drop event handler in the main app window. This seems to work best in my case.

[bra1n]

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);
                });
            });

Thanks! This fixed it for me on Linux.