1

I am having issues with handling drag and drop. I prevent_default on my drop target for both the dragEnter and dragOver events, which I can verify are firing, but the drop event is never triggered. I have also tried setting the dataTransfer.dropEffect property, which has no effect.

use yew::prelude::*;
use web_sys::{DragEvent, console::log_1};

#[function_component(App)]
pub fn app() -> Html {
    let ondragenter = Callback::from(|e: DragEvent| {
        e.prevent_default();
        e.data_transfer().unwrap().set_drop_effect("move"); // optional
        log_1(&"enter".into());
    });

    let ondragover = Callback::from(|e: DragEvent| {
        e.prevent_default();
        log_1(&"over".into());
    });

    let ondrop = Callback::from(|e: DragEvent| {
        log_1(&"drop".into());
    });

    html! {
        <main style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"
            {ondragenter}
            {ondragover}
            {ondrop}>
        </main>
    }
}

with web_sys's DragEvent and DataTransfer features enabled.

I am running this using Tauri and have tried with Yew v. 0.19 and 0.20.

bicarlsen
  • 1,241
  • 10
  • 27
  • What exactly are you dropping onto that component? Is it a file? Have you tried dropping something else? – E_net4 Dec 16 '22 at 17:55
  • Thank you for pointing that out. Yes, for files. Indeed, the `drop` event is triggered when dropping text from the same `window`. – bicarlsen Dec 16 '22 at 18:04
  • It also appears that the code functions correctly in Brave browser, so perhAps this is an issue with Tauri. – bicarlsen Dec 16 '22 at 20:56
  • Here are some issues with discussions around this issue: https://github.com/tauri-apps/tauri/issues/2768, https://github.com/tauri-apps/tauri/discussions/4736 – bicarlsen Dec 16 '22 at 21:00

0 Answers0