0% found this document useful (0 votes)
40 views2 pages

Drag-And-Drop Metadata Da7f3fc

This document discusses how to define drag-and-drop behavior for controls using metadata. The dnd key in metadata can be used to specify whether a control or aggregation is draggable and droppable. Attributes like draggable, droppable, layout, and selector define the drag-and-drop behavior.

Uploaded by

zzg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
40 views2 pages

Drag-And-Drop Metadata Da7f3fc

This document discusses how to define drag-and-drop behavior for controls using metadata. The dnd key in metadata can be used to specify whether a control or aggregation is draggable and droppable. Attributes like draggable, droppable, layout, and selector define the drag-and-drop behavior.

Uploaded by

zzg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

loio

da7f3fc826f7418d9cc3b5a61285a08d
view on: demo kit nightly build | demo kit latest release

Drag-and-Drop Metadata
To influence the drag-and-drop behavior, use the metadata definition of a control.

Overview
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' }
},
*HIGHLIGHT START*dnd*HIGHLIGHT END* : { draggable: false,
droppable: true },
aggregations : {
header : { type : "sap.ui.core.Control", multiple : false,
*HIGHLIGHT START*dnd*HIGHLIGHT END* : true },
items : { type: 'sap.ui.core.Control', multiple : true,
*HIGHLIGHT START*selector*HIGHLIGHT END* : "#{id}-items", *HIGHLIGHT
START*dnd*HIGHLIGHT END* : {

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
API Reference: sap.ui.core.Element.extend

You might also like