Can not render HTML5 drag & drop

[The-Mr-L]

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:
`
<draggable :list="list" @start="draggable = true" @EnD="draggable = false">

{{ x.title }}

<script> import draggable from "vuedraggable"; export default { components: { draggable }, data: () => { return { list: [ { title: "yolo", id: 1 }, { title: "damm", id: 3 }, { title: "hello", id: 2 }, ], }; }, }; </script>`

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

[Laegel]

Hey @LambdaMan2K , thanks for the issue!
We are aware that the HTML5 drag&drop API is broken (at least on Windows), some users have noticed it and reported it on our Discord.
For now, the only workaround we thought about is using a library that doesn't rely on this API.
I don't know why exactly this is happening, feel free to go deeper in the investigation. Come to see us on our Discord if you need some help!

[lucasfernog]

I think @wusyong said we need to allow disabling the file-drop feature.

[Laegel]

So don't call with_file_drop_handler when building webview in wry. And it should be fine.

Ah, indeed.

[lucasfernog]

I'll try to fix this for the next release. Do you have an app I can use to test it @LambdaMan2K ?

[The-Mr-L]

Thanks for the quick reply guys, this is great! Well I just used vue-cli

1. vue create app
2. selected vue2
3. cd app && vue add tauri && yarn add vuedraggable
4. then replace the src/components/HelloWorld.vue content with the following

<template>
  <draggable :list="list" @start="draggable = true" @end="draggable = false">
    <div v-for="x in list" :key="x.id">
      {{ x.title }}
    </div>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data: () => {
    return {
      list: [
        { title: "item1", id: 1 },
        { title: "item2", id: 3 },
        { title: "item3", id: 2 },
      ],
    };
  },
};
</script>

then just yarn tauri:serve

XD if you need me to test it for you just tell me :) it just requires a simple html 5 drag and drop exapmle to test it

[nothingismagick]

Indeed, the problem is that you currently need to turn off file drop if you want draggable in the window. Maybe though we could resolve this with dropzones, like how we manage the draggable region in undecorated windows. What do you think @wusyong

[The-Mr-L]

yes that seems kinda tricky, so the issue is that tauri support drag and drop of files from the os and back and now we need some kinda of abstraction to allow both features at the same time or at the time being just allow only one of them to be used? , btw I dont kno w how to share vue js code the right way on github :s the format is off

[Laegel]

@LambdaMan2K Write your Markdown this way:

```vue 
<component></component>
<script></script>```

you may need to add a line break before the last three backticks.

[The-Mr-L]

Thanks @Laegel

[The-Mr-L]

Hello again, well you are right
I just tried to comment out this part and html5 drag and drop works as expected so far :)
// if let Some(handler) = file_drop_handler {
// webview_builder =
// webview_builder.with_file_drop_handler(create_file_drop_handler(context, label, handler));
// }
Thanks again

[IAmJulianAcosta]

Hi @lucasfernog, can we get an example about how to use disable_file_drop_handler?

[FabianLars]

@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()?;

[Frioo]

@FabianLars Where are those snippets supposed to go?
I'm using Tauri with Svelte, and nowhere in the main.ts file or main.rs do I have a section that creates the default window.
I've disabled fileDrop in tauri.conf.json and the dragover event now fires and opens a new window when I drop the file, but I don't see any files in the event callback (files is just []). Any suggestions?

[FabianLars]

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).

[Frioo]

You're totally right. Indeed things are working as expected with fileDrop enabled and using tauri://file-drop event. Thanks!

[IAmJulianAcosta]

Hi @FabianLars I'm just curious, what is the issue that impedes having both things working?

[FabianLars]

@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 😅

[caldwell]

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.

[wusyong]

I can't remember the reason we add file drop handler either. Maybe we can double-check this on wry too. If anyone is interested, please open an issue there, and maybe even better, help us investigate.

[FabianLars]

@wusyong To get the file paths, not just the binary data. Which can be quite handy with the current IPC performance 😅

And the note about Windows-only is just wrong i think. maybe it was implemented only on windows at first?

[wusyong]

@FabianLars I believe all platform is blocked after investigating in tauri-apps/wry#904
I wonder couldn't we just return false? What's the previous problem or need when you handle file drop in frontend?

[FabianLars]

I wasn't actually aware that Wry's file drop handler function expects a boolean - so far i only ever tried it out in tauri apps (i meant to create a plugin that can get the file paths even with the browser's default file drop handler by abusing NewWindowRequested on Windows and navigation events on Linux, but it was a bit too annoying so i stopped working on it).

I'm gonna play around with it a bit today and see if i can spot any issues returning false.

[FabianLars]

Okay, first quick check. Even if you return false, dropping files on the input field doesn't work on windows

[wusyong]

Alright I get what you mean. However I found there's new API for webview2 handling drag and drop.
Maybe we can improve this. I'll reopen that wry issue.

[FabianLars]

i think @amrbashir tried something with that api when it was still experimental but i can't find it anymore 🤔

[amrbashir]

It didn't work unfortunately! I am still waiting for this MicrosoftEdge/WebView2Feedback#2907 so I can give it another try. And last time I checked all platforms have the same issue.

[wusyong]

@amrbashir Maybe we can call the controller when receiving tauri event as a workaround.

And it seems Linux and macOS can work if it returns false when I tested yesterday.

[amrbashir]

What tauri event?

[wusyong]

I'm thinking the event here:

tauri/core/tauri-runtime-wry/src/lib.rs

Line 3255 in 46e6187

fn create_file_drop_handler(window_event_listeners: WindowEventListeners) -> Box<FileDropHandler> {

If the listener get the tauri file drop event, I'm wondering if we can get the webview instance there and call the method.

[amrbashir]

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