Implementing Drag and Drop 

The drag-and-drop function for objects can be used in different ways, for example:

●      Browse and collect pattern: The user can select one or more data values and drag them to a specific position at another UI element. This is normally used to move or copy data. In this case you can use one of the following UI elements ItemListBox, Table, Tree. For the Table you can specify on which row the user can drop an object using the Table's property dropOnRowName and the aggregation DropOnRowTargetInfo. More information: Specifying Drop Targets on Row Level

●      Generic drag and drop: The user drags a UI element that represents a business object and drops it onto another business object. Image, Caption, GridLayout andMatrixLayout can be used as well. In this case you can use the DropTarget as a wrapping UI element.

●      Enabling runtime authoring. To enable the user to rearrange different screen areas, you can define Image, Caption or SectionHeader as drag handle. It is also possible to rearrange the items in an Accordion. For this particular use an in-place editing option can also be defined using the displayAsText property – for example - for an InputField.

●      Drag and drop using the secondary mouse button. In this case it is possible to provide different options for the user by adding a context menu.

To ensure accessibility, you always have to implement an option that the user can perform the respective task without drag and drop.

What does the user do?

The drag and drop function in Web Dynpro is designed as follows:

...

       1.      The user drags either a UI element (such as an Image) or data taken from a Table, for example.

       2.      As long as the user holds the mouse key pressed, a ghost is displayed that indicates his action.

If the user moves the mouse over a UI element that is defined as a valid drop target, the UI element indicates this either by displaying a dotted line around the container or by displaying a bold line between the respective rows. As long as the user moves the ghost over areas, that are not defined as drop targets, a prohibitory symbol is displayed additionally.

       3.      When the user drops this ghost, the onDrop event of the respective UI element is triggered. The application developer is now responsible for moving or copying the respective data or to implement the necessary steps.

Procedure

This example describes the basic steps for implementing a browse and collect pattern.

Creating the UI elements

...

       1.      To define a drag source, insert a DragSourceInfo into an ItemListBox.

       2.      To define a drop target, insert a DropTargetInfo into the other ItemListBox.

An example of how this can be implemented, is displayed below:

       3.      To specify the drag source and its corresponding drop target, enter the same string in the tagproperty of the relevant DragSourceInfo and DropTargetInfo elements.

       4.      Map the parameters of the respective onDrop event accordingly. More information: Mapping Event Parameters to Action Parameters