UI5ers Buzz #32: Drag-and-Drop is now enabled for all UI5 Controls

[cahit_guerguec]

One of the most powerful interaction design pattern available to developers is Drag-and-Drop.

Drag-and-Drop allows moving, reordering and applying actions to objects. This makes it a simple and intuitive action, in line with Fiori and users’ expectations.

With SAPUI5 version 1.56, a new dragAndDrop aggregation with multiplicity 0..n is now available for every Control in UI5 and it can be used to configure complete drag-and-drop scenarios via DragInfo, DropInfo or DragDropInfo without really giving it much thought!

Let's briefly have a look at this simple but powerful drag-and-drop condiguration objects.

 



 

DragInfo can be used just to allow dragging when drop target is not known or not owned. Additional draggable checks can be done at the dragStart event and default can be prevented.

DropInfo can be used as a general drop target. Incoming data may need to be validated at the dragEnter event. Applications should just implement the drop event.

DragDropInfo can be used when the drag source and the drop target are tightly coupled and both are known. The most common use-case is enablement own aggregations.

Both DragInfo and DropInfo offers groupName property. If this property is specified, then the DropInfo object will only interact with the relevant DragInfo objects within the same group.

Let's don't make this attractive topic boring with long texts. Let's see a little code snippet first.

Enable reordering of the items inside the List

<List items="{/Products}">     <dragDropConfig>         <dnd:DragDropInfo             sourceAggregation="items"             targetAggregation="items"             dropPosition="Between"             drop="onReorderItems"/>     </dragDropConfig>  </List>

 

Now let's see Drag-and-Drop in action.

• How can I drag from one List to another List?


• How can I specify the drop position?


• How can I specify copy drop effect?


• How can I specify non-draggable/non-droppable list item?


• How can I highlight drop target when drag is started?


• How can I reorder List items?


• How can I transfer data to another application?


• How can I show copy drop effect when “CTRL” key is pressed?


• How can I change the drop indicator’s visual design?

 

If you could follow all the links above that means you've learned already a lot. Now it is time for fun!  Yes... UI5 is not only for enterprise-ready web applications, sometimes just for jun. Let's play a little drag-and-drop game and don't hesitate to hack the source code if you cannot solve the puzzle.



 

Here are some useful links if you want to know more about drag-and-drop in UI5.

• Drag-and-Drop API


• Limitations of Drag-and-Drop


• Browse-and-Collect Pattern with Responsive Table


• Browse-and-Collect Pattern with Grid Table


• Hierarchy Maintenance with TreeTable


• Drag-and-Drop Internal Testsuite Test Page


• UI5Con Presentation (UI5 Drag-and-Drop Concept)

 

Previous post: UI5ers Buzz #31

Cahit

"Guess who I am?".charAt.call(Number, 1) + (this + "")[9] + [...[...'.....']].length + ``.substr.call(/(?:)/.constructor.name, 3) + alert.name.slice(-3);