Using the Drag-and-Drop
API
Drag and drop is commonly used when a user wants to transfer data from
one component to another component. With XUI Framework version 2.3, the
drag and drop capability can be applied to the xtable, xtree, and xtabbedpane
components. To drag one element from the source component and drop it
to the target component, a user needs to apply the supported drag and
drop attributes into both the target and source components declaration.
The supported drag and drop attributes are the following:
- drag-begin
- drag-enter
- drag-over
- drag-exit
- drag-drop
- drag-complete
In addition to the drag and drop attributes, there is DragDropEvent,
a supporting JavaScript objects that will be discussed thoroughly later.
Drag and Drop Modes
Each of the supported attributes reacts on different type of drag and
drop events. In overall, these attributes are categorized into two sections,
the dragging mode and the dropping mode. For example, during dragging
mode, drag-begin and drag-complete attributes are triggered. The drag-enter,
drag-over, and drag-drop are triggered during the dropping mode. The dragging
related attributes are applied into source component declaration, and
the dropping related attributes are applied into target component declaration.
The following table describes the categorization of the attributes based
on the mode.
| Dragging Mode (Source Component) |
Dropping Mode (Target Component) |
drag-begin
drag-exit
drag-complete
|
drag-enter
drag-over
drag-drop |
Next: Drag-and-Drop
Attributes in Detail
Back to: Application Guide
| 