This topic provides an overview the Drag-and-Drop feature of the
This topic contains the following sections:
The Drag-and-Drop feature of the
igTree control enables users to drag-and-drop tree nodes.
Dragging and dropping can be performed within the same tree or between two different trees. The latter is configured in addition to the “normal” (within the same tree) drag-and-drop.
You can also specify the action to be performed upon the drag-and-drop move – copying or pasting – and whether the user should have the option to select between the two. This is managed by configuring the
igTree control to one of the several supported Drag-and-Drop modes.
Custom validation logic for the drag-and-drop move can be supplied, too. It is implemented upon the “drop” part of move. (See Configuring the Drag-and-Drop Feature for details.)
The Drag-and-Drop mode specifies whether the drag-and-drop action will copy or move the dragged node and whether the user will have the choice which action to perform. The following table explains the supported Drag-and-Drop modes.
|Default (default)||By default, the drag-and-drop action moves the node. If the user performs the drag-and-drop with the Ctrl key down, then the node is copied instead.|
|Copy||The drag-and-drop action copies the node. The user cannot change the drag-and-drop action with the Ctrl key. (The Ctrl key has no effect.)|
|Move||The drag-and-drop action moves the node. The user cannot change the drag-and-drop action with the Ctrl key. (The Ctrl key has no effect.)|
By default, the Drag-and-Drop feature is disabled. You enable it by setting the
dragAndDrop property to true. For details, refer to the Enabling Drag-And-Drop (
The following table summarizes the main aspects of the Drag-and-Drop feature in the
igTree control. Additional details are available after following the summary table.
|Support for drag-and-drop between trees||You can specify for the
|Drag-and-drop mode||Specifies the Drag-and-Drop mode. For details, refer to Configuring Drag-and-Drop Mode (igTree).|
|Drop validation||You can specify custom validation function to validate the drop action for the node being dragged.|
|The look of the drag visual tokens||There is a token element shown while the user is dragging a node. This element indicates whether the node is about moved, copied, or invalided at the moment. You can customize the look of that token through the markup settings.|
|Delays||You can specify various delays for the drag-and-drop mouse action, for instance, a delay after the left mouse button is pressed down, to prevent unwanted drags when clicking on an element.|
|Revert animation||When a drop action is unsuccessful, an animation can be played showing the node returning to its original location. You can enable/disable this revert animation and specify its length.|
The following topics provide additional information related to this topic.
Enabling Drag-and-Drop (igTree): This topic explains, with code examples, how to enable the Drag-and-Drop feature in the
Configuring Drag-and-Drop (igTree): This topic explains, with code examples, how to configure the Drag-and-Drop of the
Drag-and-Drop API Reference (igTree): The topics in this group explain how to configure some aspects of the Drag-and-Drop feature of the
The following samples provide additional information related to this topic.
View on GitHub