Blazor icon indicating copy to clipboard operation
Blazor copied to clipboard

Drag and drop doesn't work in Firefox

Open Andrzej-W opened this issue 6 years ago • 5 comments

I haven't analysed your source code yet, but it doesn't work in Firefox (I have 62.0.3). It works in Chrome and Edge.

I understand that it is only a demo for drag and drop but be careful with static data in Blazor server side application. Your static data is the same for all users of your application. Open your demo app in two different browsers, drag one item in the first browser and refresh page in the second browser to see the effect.

Andrzej-W avatar Oct 16 '18 15:10 Andrzej-W

I appreciate your feedback. This demo is intended to show the possibility to realize drag an drop in a Web App with Blazor. I took it from custom web application for our Intranet I'm currently working on. I stripped it down to demonstrate a simple and minimalistic code sample. In real-world applications the drag item could be bound to a data context so there would be no problem with static instances. But you are right, it could lead to an issue if other developers are simply copy&pasting the code.

I will investigate the Firefox issue. I never tested with FF. In our Intranet we only need support for IE11/Edge and Chrome.

sven5 avatar Oct 17 '18 07:10 sven5

Currently it seems impossible to fix the drag and drop for Firefox. FF needs to set event data along with the dragstart event (see example here) to have the drag item draggable. But I need to use the dragstart event in Blazor with C# to track the drag item. Today, it's impossible to attach a JS event to both a C# method and a JS method call. Even with using JsInterop there is no way to call ev.dataTransfer.setData(…) because of missing interoperability between Blazor and JS (setData is undefined).

I will leave this issue open and check again in the next months when the JS bridge in Blazor evolves.

sven5 avatar Oct 17 '18 09:10 sven5

Please check this links to see how drag and drop works in blazor, including firefox.

https://github.com/Lupusa87/BlazorDragAndDrop

https://lupblazordraganddrop.z20.web.core.windows.net/

Lupusa87 avatar Mar 05 '19 21:03 Lupusa87

@Lupusa87 Thanks for your update. I see you're using some JSInterop to get it working in Firefox. However, my intent was to only use Blazor / C# without custom JS Interop because of better maintainability. I didn't look into this for a while because currently I'm focusing on an Intranet application mainly targeting IE11 and Chrome.

sven5 avatar Mar 06 '19 08:03 sven5

Unfortunately it is not yet possible to avoid js completely.

Thank you too for your work which helped me to achieve my goal.

I use drag and drop in my virtual grid component's columns manager and not having it working in Firefox would be bigger problem than using some js :)

Lupusa87 avatar Mar 06 '19 22:03 Lupusa87