`ondrop` event not getting fired

[wooden-worm]

Problem

I'm trying to implement drag & drop on the web, but ondrop is not getting called.

                        ondrop: move |event| {
                            debug!("on drop");
                        },
                        ondragenter: move |event| {
                            event.stop_propagation();
                            debug!("ondragenter");
                        },
                        ondragover: move |event| {
                            event.stop_propagation();
                            debug!("ondragover");
                        },

I think I need to call event.preventDefault() on the JS event (not the Rust event). However, it's not clear to me how to do so.

Expected behavior

ondrop should be called.

Environment:

• Dioxus version: 0.5.0
• Rust version: 1.77
• OS info: macOS
• App platform: web

Questionnaire

• [x] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later

[JustSomeRandomUsername]

I had the same problem not long ago. Indeed the problem is that you have to preventDefaults() on the on ondragover event of the target. In Dioxus you do this be setting an attribute on the rsx Element instead of calling a function on the event.

div {
    prevent_default: "ondragover",
}

Last time I checked i didn't find any documentation for this and found out about this attribute after reading a code snipped in a random issue. It seems to be documented now: Event Handlers

[wooden-worm]

I had the same problem not long ago. Indeed the problem is that you have to preventDefaults() on the on ondragover event of the target. In Dioxus you do this be setting an attribute on the rsx Element instead of calling a function on the event.

div {
    prevent_default: "ondragover",
}

Last time I checked i didn't find any documentation for this and found out about this attribute after reading a code snipped in a random issue. It seems to be documented now: Event Handlers

Thank you, that works for me 👍