search

sven5 / Blazor

Demo code/tools for Blazor
MIT License
19 stars 8 forks source link

Drag and drop doesn't work in Firefox #2

Open Andrzej-W opened 6 years ago

Andrzej-W commented 6 years ago

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.

sven5 commented 6 years ago

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 commented 6 years ago

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 dragstartevent 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.

Lupusa87 commented 5 years ago

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/

sven5 commented 5 years ago

@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.

Lupusa87 commented 5 years ago

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 :)