Drag & Drop

[danroth27]

We'd like to

• Provide events that users can subscribe to during drag and drop.
• Have visual cues that shows items being dragged
• Restrict the locations that items can be dropped including providing visual cues

[danroth27]

Related issues:

• In Blazor ! How do we perform (Drag & Drop) & (Resizing) in Server-side application. #14132
• Need examples showing Blazor Drag and Drop API #15670
• Setting and clearing data for DragDrop operations #5532

[Postlagerkarte]

Hi @danroth27 : Can you please also include #14792 when considering Drag & Drop?

Also I currently face the problem that DataTransfer.Files is null when dropping a file.

So basically it would be great if the all properties of the DragEventArgs are available and we read/write access to them!

[pranavkm]

More context: https://gist.github.com/MackinnonBuck/374e529e9c3fdb9d228214b4cc79e617. @MackinnonBuck's work is in the “t-mabuc/drag-and-drop” branch in the aspnetcore repository (also linked in the writeup).

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[abspro]

And how was the lad's internship? Would like to see this get some love.

[danroth27]

After investigating various approaches we've decided that a general purpose drag & drop feature isn't something we can easily add to the Blazor framework due to the following issues:

• There’s a vast range of possible UX designs/requirements for drag-drop including different combinations of:
  • Things that can be highlighted/ghosted/animated while dragging
  • Rules about what can be dropped where and how to warn/animate violations
  • UI experiences when dragging to the edge of scrollable regions, (e.g., speeding up the scrolling when you drag further, doing rubber-band effects)
  • Interactions with keyboard support and accessibility
• Trying to support even 80% of requirements would be very expensive and open a long tail of support issues.
• There isn’t one standard way to do it. The HTML5 drag/drop APIs are not adequate for most real-world apps (for example, they don’t work at all in iOS). There are lots of different 3rd-party libraries, all talking different opinions on what you want to customize.

Fortunately, it can be relatively straightforward to solve drag/drop in a special-case way according to the needs of one specific app because you can pick out one of the many .js drag/drop libraries that happens to do things with the particular UX you want and call it via JS interop. For example, this sample uses draggable.js and JS interop to build a mobile-capable drag-drop calendar UI. We think the Blazor community is best suited to decide which approaches to drag & drop are most useful to package and share.

Since we don't plan to add this as a core feature of Blazor, I'm going to go ahead and close this issue.

[HybridSolutions]

@danroth27 It would be interesting that Blazor team could provide a couple of examples from basic to more advanced showing how to integrate Blazor with one of the drag&drop libraries out there, preferably, one that is not deprecated. I feel there's little support for advanced functionalities and articles out there take time 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 problem of initialization in Blazor components.

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