Drag-and-Drop Overview (igTree)

Topic Overview


This topic provides an overview the Drag-and-Drop feature of the igTree™ control.

In this topic

This topic contains the following sections:

Introduction to the Drag-and-Drop Feature

Drag-and-Drop feature summary

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.)

Drag-and-Drop modes

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.

Drag-and-Drop Mode Description
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.)

Enabling the Drag-and-Drop Feature

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 (igTree) topic.

Configuring the Drag-and-Drop Feature

Configuring the Drag-and-Drop Feature summary chart

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.

Configurable Aspect Description
Support for drag-and-drop between trees You can specify for the igTree control whether it will accept drag-and-drop from other igTree controls. For details, refer to Enabling Drag-and-Drop (igTree).
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.

Related Content


The following topics provide additional information related to this topic.


The following samples provide additional information related to this topic.

View on GitHub