[Feature Request]: Generic draggable/droppable concepts from UI5 webcomponents

Feature Request Description

In SAP Analytics Cloud we have functionality where dragging and dropping a 'feed' (a measure like say, Profit) onto an empty area on a 'canvas' should cause some response. To implement this, we have had to implement custom third party libraries like react-beautiful-dnd or pragmatic-dnd.

There is some desired target architecture where ideally all our UI components where possible use ui5 webcomponents.

I notice that there is already capability within ui5 webcomponentts 2.X to be able to drag and drop within a list, between lists, and within a table.

Proposed Solution

The common thread between many of these third party libraries is the concept of a 'draggable' and 'droppable' component or zones. This also exists in react-dnd, dnd-kit, etc.

I debugged List.ts in the ui5 webcomponents 2.x playground and found the onDrop was triggered by the List itself. In this case the ListItem is already made the 'draggable,' and potentially exposes one or more properties of the ListItem.

One proposal would be to have some sort of DroppableWrapper component exposed by UI5, where it could wrap some other UI components that could then execute logic when an item from a UI5 List or Table is dragOver or dropped within it.

Proposed Alternatives

No response

Organization

SAP Analytics Cloud

Additional Context

https://atlassian.design/components/pragmatic-drag-and-drop/

Priority

Medium

Privacy Policy

• I’m not disclosing any internal or sensitive information.

Start with List.ts and the UI5 2.x playground, focusing on how List, ListItem, and Table currently handle onDrop and dragOver. Compare that behavior with the requested generic draggable and droppable concepts; the work is complete when the project has an agreed API and documented behavior for wrapping components and handling drops.