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