Microsoft won’t do drag-and-drop for Blazor – Visual Studio Magazine


Microsoft won’t do drag-and-drop for Blazor

Don’t look for Microsoft to provide drag-and-drop functionality for Blazor, though that could still be done through JavaScript interop.

This feature was proposed over two years ago in a GitHub Drag & Drop issue #18754, with Microsoft’s Daniel Roth saying the development team would like:

  • Provide events that users can subscribe to while dragging and dropping
  • Have visual cues that show moved items
  • Restrict where items can be dropped, including providing visual cues

This GitHub issue was closed about two weeks ago, with Roth stating, “After investigating various approaches, we’ve decided that general-purpose drag-and-drop functionality isn’t something we can easily add to the framework. Blazor.”

But all is not lost, as Roth explained that JavaScript libraries can be used, perhaps ironically because some of the first – albeit somewhat dishonest – hype about Blazor was that it allowed coders to use C# instead of JavaScript, at least as core programming. Tongue. In the real world, it seems some JavaScript is commonly used in Blazor apps, and Microsoft was quick to note that it’s more accurate to say that Blazor actually allows developers to use C# in conjunction with JavaScript.

The Chris Sainty Project in Animated Action
[Click on image for larger, animated GIF view.] The Chris Sainty Project in Animated Action (source: Chris Sainty).

Blazor’s drag and drop is a long-requested and often-debated feature, with a question on Stack Overflow coming back to it in 2018. And in 2020, Blazor expert Chris Sainty wrote an article “Investigating Drag and Drop with Blazor “. Several developers have also published their own Blazor drag-and-drop projects on GitHub, including blazor-dragdrop.

blazor-dragdrop Drag and drop library for Blazor
[Click on image for larger view.] blazor-dragdrop Drag and drop library for Blazor (source: GitHub – Postlagerkarte/blazor-dragdrop).

However, nothing seems to have particularly stood out and gained popularity.

Roth said Microsoft declined to address it internally for these reasons:

  • There is a huge range of possible designs/UX requirements for drag and drop, including different combinations of:
    • Things that can be highlighted/ghosted/animated while dragging
    • Rules on what can be abandoned, where and how to notify / animate violations
    • UI experiences when dragging to the edge of scrollable regions (e.g. making scrolling faster when dragging further, making rubber effects)
    • Interactions with keyboard support and accessibility
  • Trying to support even 80% of the needs would be very expensive and open a long string of support issues.
  • There is no standard way to do this. HTML5 drag and drop APIs aren’t adequate for most real-world applications (for example, they don’t work at all in iOS). There are many different third-party libraries, all with different opinions on what you want to customize.

Indeed, on that last bit, Sainty and the blazor-dragdrop project use the HTML Drag and Drop API, with the maintainer of blazor-dragdrop admitting that it doesn’t work on most mobile browsers and suggesting that a polyfill library be created for mobile support. Sainty said his project using the API was “a very simple experience and more like a fact-finding mission.”

As mentioned, Roth championed JavaScript interoperability.

“Fortunately, it can be relatively easy to solve drag and drop in a particular way depending on the needs of a specific application, because you can choose one of many .js drag and drop libraries that do things with the particular UX you want and invoke it via JS interop,” he said. “For example, this sample uses draggable.js and JS interop to create a mobile-friendly drag-and-drop calendar UI. We believe the Blazor community is best placed to decide which drag-and-drop approaches are the most useful for packaging and sharing.”

Roth concluded, “Since we don’t plan to add this as a core Blazor feature, I’ll go ahead and close this issue.”

Yet there was another comment after that, from “HybridSolutions”:

It would be nice if the Blazor team provided some examples, from simple to advanced, showing how to integrate Blazor with one of the drag and drop libraries, preferably one that isn’t deprecated. I think there is little support for advanced features and articles are slow to appear. Also, since Bootstrap is the framework used in default templates, it would be interesting to see some examples on how to use BS components and deal with the initialization issue in Blazor components.

I guess it takes time, but it would be nice to see some examples from manufacturers with best practices for easier adoption.

Interestingly, Microsoft’s decision was announced in 2018 by the world’s foremost authority on Blazor (he created it, with the sample cited by Roth above), Steve Sanderson: “I think there’s high chance that an end to end drag and drop mechanism will likely still involve JS interoperability at this time.”

There’s plenty more discussion – and several proposed alternatives – to be found in a Reddit thread launched this week titled “Drag-and-drop not being added as a core feature in Blazor.”

The discussion starts with this: “I can understand that HTML5 drag and drop doesn’t work on iOS, but support for HTML5 events seems like a minimum requirement for me? It seems community support is even more important now for Blazor.”

About the Author

David Ramel is an editor and writer for Converge360.

Comments are closed.