To influence the drag-and-drop behavior, use the metadata definition of a control.
You can use the dnd key for the drag-and-drop behavior of a control. Here is an example that shows you how the dnd key can be used:
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 : true },
items : { type: 'sap.ui.core.Control', multiple : true, selector : "#{id}-items", dnd : {
draggable: true, dropppable: true, layout: "Horizontal"
} },
}
}
You can use the following attributes in the metadata of a control for drag and drop:
draggable: Defines whether the control or aggregation is draggable
Default value of draggable is false.
droppable: Defines whether dropping is allowed for the control or within the control and/or from one of its aggregations to another one
Default value of droppable is false.
layout: Defines the arrangement of the items in the aggregation
Possible values are Vertical (for example, rows in a table) and Horizontal (for example, columns in a table). Default value of layout is Vertical.
selector: Defines the location of the aggregation in the control DOM
This setting is recommended for the aggregation with cardinality 0..n.
Related Information