Drag and Drop

Use

With drag and drop users can select UI element entries or view elements themselves (source), drag them, and drop them onto a different view element (target). Source and target can be either the same view element or two different view elements.

In Web Dynpro only certain UI elements can be used as the source or target of a drag and drop operation.

Procedure for End Users

Drag and drop functions as follows:

  1. The user drags a UI element, for example, an Image, a row from a Table, a node of a Tree, or entries in an ItemListBox by holding down the mouse button.

  2. While the user holds down the mouse button, a "ghost" image appears on the screen (a copy of the dragged objects), which follows the movement of the mouse cursor. If the user moves the mouse pointer over a UI element on which the user can drop the object, this is displayed either as a box with a dotted line border (for example, MatrixLayout), as a row inserted between other rows (for example, Table), or it is is highlighted (for example, table rows). Otherwise the mouse pointer displays a prohibitive sign. A view element or its entries can be dropped onto a target object, if a DropTargetInfo is defined for the target object (see below), and at least one target and source tags match. When the user drops the object, the onDrop event of the target is triggered.

  3. The application developer must ensure that the actions are executed - that the data is actually moved or copied.

Procedure for Developers

To implement drag and drop, proceed as follows:

  1. To define a drag source, add DragSourceInfo to the view element in question.

  2. To define a drop target, add DropTargetInfo to the view element in question.

  3. To define which drag source can be moved to which drag target, specify the corresponding string (same name) for property tags of the relevant DragSourceInfo and DropTargetInfo.

    You can also use multiple tags. You separate the tags with blank spaces.

    The system does not differentiate between uppercase and lowercase letters in tags. It is possible to use an asterisk ( *) as a wildcard at the end of the tags in the DropTargetInfo, for example, grid*).

    You are not allowed to use the following characters:

    • Colon ( :)

    • Comma ( ,)

    • Semicolon ( ;)

    • Backslash ( \)

    • Slash ( /)

    • Point ( .)

    You can use this property to define your own development standards. As software architects you should pay attention to which tags you use, and how you design them.

  4. You can set an action handler for the onDrop event of the target.

Data Transport

The data is transported using property DragSourceInfo.data: When data is dropped, an event is triggered and DragSourceInfo.data is passed as the data event parameter. If applicable, additional information, such as the insertion position, is passed in an event parameter.

Note that the data is not reloaded; it must be available before the drag action.

Area of Validity

The validity area of DragSourceInfo is defined in property DragSourceInfo.scope. You can choose whether DragSourceInfo can be used within the component only, or beyond component boundaries.

For more information, see DragSourceInfo Properties.

Features

Drag and drop is available for the following UI elements:

UI Element

Action

Accordion

In an Accordion two types of drag and drop are possible:

  • Drag and drop UI elements, for example, an Image, onto an AccordionItem

  • Drag and drop AccordionItemsbefore or after another AccordionItem

You can test this behavior with component WDR_TEST_ACCORDION in the system.

CTable

For information, see Drag & Drop in the CTable.

GridLayout

MatrixLayout

In GridLayout and MatrixLayout single cells of this layout can be moved, or objects inserted between cells.

Drag and drop is only possbile with a one-columnGridLayout. In MatrixLayout drag and drop is only possible with single rows.

For drag and drop in layouts you need events and aggregations. Proceed as follows:

  1. When you initialize UIs in WDDOMODIFYVIEW (if possible, only when this method is first called), you need the MatrixLayout or GridLayout of the TransparentContainer or Group, in which you want to insert elements or whose child elements you want to move by drag and drop.

  2. Instantiate a DragSourceInfo and a DropTargetInfo, then insert the LayoutData into it.

  3. Set an action for the onDrop event of LayoutData.

  4. If you want to drag the child elements (that is, the cells of the layout - MatrixHeadData, and the following MatrixDatas or GridDatas), set property dragData of LayoutDatas, so that you can identify the cells later when you drop them. The value of dragData of a dropped layout cell appears later as the data event parameter in the onDrop event.

  5. Since layout cells need handles for the user to be able to move them with the mouse, you can use Captions, Images or SectionHeaders as handles by setting their isDragHandle property to true.

Image

An image can be moved by selecting, then dragging it.

ItemListBox

Entries are moved by selecting them (multiple selection SHIFT + mouse click), and dragging them.

Objects can be inserted into a ItemListBox in certain places:

  • Between existing entries

  • In the first and last positions in a list

In an empty ItemListBox there is only one possible insertion position (first = last position).

PanelStack

In a PanelStack two types of drag and drop are possible:

  • Single panels can be moved to a PanelStack.

  • PanelStack s can be moved as one object.

Table

Single table rows can be moved.

Objects can be inserted into a Table in certain places:

  • Between existing rows

  • In the first and last positions with the rows

In an empty Table there is only one possible insertion position (first = last position).

You can also move rows.

For more information, see Drag & Drop in Tables.

Tree

Single nodes and end nodes can be moved.

Objects can be dropped into a Tree in certain places:

  • Between existing child nodes

  • In the first and last position within a parent node

  • On an existing node, regardless of whether there is already a child node there or not.

Multiple nodes can only be selected for drag and drop if at least one of the tags is common to all nodes.

In an empty Tree there is only one possible insertion position (first = last position).

The following UI elements are essential for drag and drop operations:

UI Element

Description

DropTarget

DropTarget is the target of a drag and drop procedure It specifies where a UI element moved with drag and drop can be dropped.

For more information, see DropTarget

Example

WDR_TEST_DRAG_AND_DROP

The test component WDR_TEST_DRAG_AND_DROP is provided in the system. The following implementation scenarios for drag and drop are demonstrated:

  • Browse and collect

    Here a user selects one or more entries, and drags them to a position on a different UI element. The data is either copied or moved. The same DragSourceInfo is used for all lines. Entries can be added wherever a DropTargetInfo is defined.

    Browse and collect is available for the following UI elements:

    The following figure illustrates Browse&Collect using the ItemListBox as an example:

    Example of Browse and Collect

  • Generic Drag and Drop

    The user moves a UI element, and drops it onto a DropTarget. Image, GridLayout, and MatrixLayout can be used for this. In this case a DropTarget is used as a wrapping UI element.

    The following figure illustrates the generic drag and drop.

    Example of Generic Drag and Drop with Image

  • Runtime Authoring

    You can define the following UI elements as drag handles (property isDragHandle), to sort various screen areas. The following UI elements can be moved in this way: