drag & drop in Firefox

[sven5]

Hi Chris,

In Firefox we need an additional step to get drag & drop working. FF needs the call to ev.dataTransfer.setData("text", null) on dragstart event.
Currently, this seems impossible to do with Blazor server-side. I already made some investigation almost one year ago.
The main problem seems to be that the ondragstart attribute must be used for Blazor's event handling and can no longer be used for a js call. When calling a JS function through interop and passing the DragEventArgs from Blazor the method setData cannot be called.

However, it would be great if you find another way to get it working.

Regards
Sven

[chrissainty]

Thanks for this info @sven5. I'll add it to my notes and will have a play around when I get a chance and get back to you if I find anything. I'll leave this issue open to track it.

[Sebazzz]

It is possible by adding a global event handler for the dragstart event, which bubbles up.

    document.addEventListener('dragstart', function(ev) {
        if (ev.target.classList.contains('draggable')) {
            ev.dataTransfer.setData("text", null);
        } else {
            console.log('ignoring draggable');
        }
    });

However, this also triggers a navigation on dragend to null.com.

Edit: That was fixed using:

document.addEventListener('drop', function(ev) {
    ev.preventDefault();
});

[chrissainty]

@Sebazzz Yes, that would probably do the job. In my tests I was specifically trying to see what I could achieve without using JS. But if you need this to work today then your suggestion could be the solution.

[sven5]

Thanks @Sebazzz for working out this solution. I also tried to get drag&drop working without js. Currently, this seems impossible for FF.

[enkodellc]

@chrissainty FYI this is now fixed in the latest Blazor / FF.
Live demo / test: https://blazorboilerplate.com/drag_and_drop