One of the most powerful interaction design patterns available to developers in UI5 is "Drag and Drop". Learn how to enable, manage and enjoy with it!

1. Cahit Gürgüc, SAP SE
June 22, 2018
Drag & Drop
Concept in UI5

2. 2
Drag & Drop – Fiori Launchpad

3. 3
Drag & Drop – Overview Page

4. 4
Drag & Drop – Browse & Collect Pattern

5. 5
High Level Decision

6. 6
UIArea
preprocessEvent
postprocessEvent
Element
dragDropConfig
aggregation
DragAndDrop
(enhance browser events)plugs in event handling
Standard Browser Events:
• dragstart
• dragenter
• dragover
• dragleave
• dragend
• drop
PLUS:
• Consistent across browsers
• DragSession (data transfer)
• Enhanced ghost (+badge)
• Visual style for source/target
DragDropInfo
[sourceAggregation]
[targetAggregation]
[targetElement]
drop event
dragEnter event
DragSession
Simple config for standard use-cases:
• Specifies source + target
• Declarative, bindable
• Allows providing ACC alternatives
• Event driven
0..n
BrowserEventLevelControlLevel
RenderManager
("draggable" attribute)
writeElementData

7. 7
• DragDropInfo can be used when the drag source and the drop target are tightly
coupled and both are known.
• DragInfo can be used just to allow dragging when drop target is not known or
not owned.
• DropInfo can be used as a general drop target.
Config Types - Overview

8. 8
Config Types - Details
DragDropInfo
[targetElement=parent]
(0..1)
[sourceAggregation]
[targetAggregation]
[dropEffect="Move"]
[dropPosition="On"]
dragStart
dragEnter
dragOver
drop
dragEnd
DragInfo
[sourceAggregation]
[groupName]
dragStart
dragEnd
DropInfo
[targetAggregation]
[groupName]
[dropEffect="Move"]
[dropPosition="On"]
dragEnter
dragOver
drop(tightly coupled cases)
(loosely coupled cases)
connected

9. 9
Drag & Drop Use-Cases
Within controls:
• Re-ordering a List
• Moving items within Tree
• Re-ordering IconTabBar Tabs
Between controls:
• Moving items between two lists (browse-and-collect)
• Moving items of any kind to Co-Pilot to do something with the associated data
Outside the browser:
• Drag any piece of text or html or so into the browser
• Drag a file into the browser
• Drag some data out of a Table into an Excel file
• Drag some data to a local file
DragInfo
DragDropInfo
DropInfo
DragDropInfo
DragDropInfo
DragDropInfo
DropInfo
DragInfo
DragInfo

10. 10
<List headerText="Drag my items">
<dragDropConfig>
<dnd:DragDropInfo
sourceAggregation="items"
targetElement="otherList"
drop="handleDrop" />
</dragDropConfig>
<items>
<StandardListItem ... />
</items>
</List>
<List headerText="Drop here" id="otherList">
...
</List>
Example 1: Drag from one List to another List
Plus "do the needful" in
Controller.handleDrop()

11. 11
Example 2: Reordering List Items
<List headerText="Reorder my items">
<dragDropConfig>
<dnd:DragDropInfo
sourceAggregation="items"
targetAggregation="items"
drop="handleReorder" />
</dragDropConfig>
<items>
<StandardListItem ... />
</items>
</List>
Plus "do the needful" in
Controller.handleReorder()

12. 12
Drag from known source to known target:
 Just specify source and "targetElement" in the DragDropInfo and handle the "drop" event
Loosely coupled drag&drop (e.g. multiple/dynamic sources or targets):
 Specify DragInfos and DropInfos with same "groupName" and handle "drop" event
Drag with unknown/external target (other view, FLP, outside browser):
 Specify DragInfo, add suitable data, optionally add predefined "groupName" for the target
Receive from unknown/external source (other view, FLP, file system):
 Specify DropInfo, optionally an expected "groupName", handle "drop" event, but validate transferred
data! Anything unexpected may come in!
Programming Model – Use Cases

13. 13
Copy vs Move vs Link:
 Set "dropEffect" on DropInfo/DragDropInfo
"Drop On" vs "Insert Between":
 Set "dropPosition" property of DropInfo/DragDropInfo
Transferring data: (caveat: not all options are available in all browsers)
 Either access source control in "drop" event, if well-known
 Or use "setData", "setTextData", "setComplexData" via DragSession on "dragstart" event
Programming Model – Further Options

14. 14
Not all items should be dragged:
 Handle "dragstart" event on DragInfo and prevent default of the event.
Not all items are valid drop targets:
 Handle "dragenter" event on DropInfo and prevent the default of the event.
One can drop into some targets, but between other targets:
 Handle "dragenter" event on DropInfo and set "dropPosition" accordingly
Programming Model – Special Handling

15. 15
If the offered configuration is not flexible enough:
 Just use the standard drag&drop events
 They are still enhanced by UI5 to provide proper ghost images etc.
To make drag&drop work across all devices/platforms
 Do not use any native browser features – because they do not work in some browsers or are not
available at all (e.g. no native drag&drop on touch devices)
 Only use Drag/DropInfo configuration and the DragSession object APIs
To make drag&drop accessible for non-mouse-users
 Only use Drag/DropInfo configuration and the DragSession object APIs
Programming Model – Fundemantals

16. 16
Live Coding

17. 17
Control.extend('my.CustomControl', {
metadata : {
properties : {
value : { type : 'string' },
width : { type : 'sap.ui.core.CSSSize', defaultValue : 'auto' }
},
dnd : { draggable: false, droppable: true },
aggregations : {
header : { type : "sap.ui.core.Control", multiple : false, dnd : false },
items : { type: 'sap.ui.core.Control', multiple : true, selector : "#{id}-items", dnd : {
draggable: true, dropppable: true, layout: "Horizontal"
} },
}
}
Metadata

18. 18

19. 19
• There is no mobile device that supports drag and drop. Polyfill is planned.
• Transparency of the drag ghost element and the cursor during drag-and-drop
operations are not configurable.
• Setting constraints on drag position is not possible.
• Texts in draggable controls cannot be selected.
• IE11 only supports plain text MIME type for the DataTransfer Object. Also
defining a custom drag ghost is not possible.
Limitations

20. 20
Drag & Drop – For fun..

21. Thank you.
Contact information:
Cahit Gürgüc
Senior Developer
https://twitter.com/aborjinik
https://www.linkedin.com/in/cahitgurguc