This topic provides reference information about the properties of the igTree™ control related to its Drag-and-Drop feature. The properties are listed alphabetically.
The following table explains the properties of the drag-and-drop feature of igTree and lists the default and recommended values.
| Property | Type | Description | Default Value |
|---|---|---|---|
| allowDrop | Boolean | Specifies whether the control will accept drops from other controls. This property is set inside the DragAndDropSettings property. | false |
| containment | Boolean/Selector/Element/String/Array | When true, the area inside which the helper is contained is scrollable while dragging. This property is set inside the DragAndDropSettings property. | false |
| copyAfterMarkup | String | Hint markup upon “Copy after”. This hint appears when the copied node is about to be dropped after the currently highlighted node (the node over which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Copy after {0} |
| copyBeforeMarkup | String | Hint markup upon “Copy before”. This hint appears when the copied node is about to be dropped before the currently highlighted node (the node over which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Copy before {0} |
| copyBetweenMarkup | String | Hint markup upon “Copy between”. This hint appears when the copied node is about to be dropped between the two currently highlighted adjacent nodes (the nodes between which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Copy between {0} and {1} |
| copyToMarkup | String | Hint markup upon “Copy to”. This hint appears during dragging when the copied node is about to be dropped over the currently highlighted node (the node over which the mouse pointer is hovering at the moment). In this case, the copied node will become a child node of the target (highlighted) node. This property is set inside the DragAndDropSettings property. |
Copy to {0} |
| customDropValidation | Function | Provides an entry point for custom drop validation. The custom validation must have a Boolean return value. It makes the drop point not valid if false is returned. Custom drop validation function is overridden by the internal tree validation, so you can invalidate a drop-and-drop action only at the drop point. This property is set inside the DragAndDropSettings property. | null |
| dragAndDrop | Boolean | Enables/disables the Drag-and-Drop feature. | false |
| dragAndDropSettings | Object | Complex option for the settings managing the drag-and-drop feature. | none |
| dragAndDropMode | String | Specifies the Drag-and-Drop mode. The valid settings are: Each of them sets the respective Drag-and-Drop mode. This property is set inside the DragAndDropSettings property. | default |
| dragOpacity | Float | Opacity/transparency level of the dragged node and the hint while dragging. The range of valid values is between 0 and 1 with 1 meaning the hint is fully opaque and 0 meaning the hint is fully transparent. This property is set inside the DragAndDropSettings property. | 0.75 |
| dragStartDelay | Number |
Time to elapse (in milliseconds) after a mousedown event after which dragging will be allowed. The purpose of this option is to prevent unwanted drags when clicking on an element.
This property is set inside the DragAndDropSettings property.
|
200 |
| expandDelay | Number |
Time to elapse (in milliseconds) after a mousedown event after which the node will expand after hovering it during drag.
This property is set inside the DragAndDropSettings property.
|
1000 |
| helper | String |
Allows for a helper element to be used for displaying the dragging.
The valid settings are:
|
default |
| invalidMoveToMarkup | String | Hint markup for invalid drop location. This hint appears when the moved node is about to be dropped over an invalid drop location. This property is set inside the DragAndDropSettings property. |
|
| moveAfterMarkup | String | Hint markup upon “Move after”. This hint appears when the moved node is about to be dropped after the currently highlighted node (the node over which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Move after {0} |
| moveBeforeMarkup | String | Hint markup upon “Move before”. This hint appears when the moved node is about to be dropped before the currently highlighted node (the node over which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Move before {0} |
| moveBetweenMarkup | String | Hint markup upon “Move between”. This hint appears when the moved node is about to be dropped between the two currently highlighted adjacent nodes (the nodes between which the mouse pointer is hovering at the moment). This property is set inside the DragAndDropSettings property. |
Move between {0} and {1} |
| moveToMarkup | String | Hint markup upon “Move to”. This hint appears during dragging when the moved node is about to be dropped over the currently highlighted node (the node over which the mouse pointer is hovering at the moment). In this case, the moved node will become a child node of the target (highlighted) node. This property is set inside the DragAndDropSettings property. |
Move to {0} |
| revert | Boolean | If set to true, the dragged node will return to its original locations when dragging stops. This property is set inside the DragAndDropSettings property. | true |
| revertDuration | Number | Duration of the revert animation (in milliseconds). Setting this property to 0 disables the animation. The revertDuration setting is ignored if the revert property is false. This property is set inside the DragAndDropSettings property. | 500 |
| zIndex | Number | z-index for the helper while the element being dragged. The z-index specifies the stack order of an element. An element with a greater stack index is always in front of an element with a lower stack order. This property is set inside the DragAndDropSettings property. | 10 |
The following topics provide additional information related to this topic.
Drag-and-Drop Overview (igTree): This topic provides an overview the Drag-and-Drop feature of the igTree control.
Drag-and-Drop Event Reference (igTree): This topic provides reference information about the events of the igTree control related to its Drag-and-Drop feature.
API Links (igTree): This topic provides links to igTree jQuery and MVC API.
The following samples provide additional information related to this topic.
Drag and Drop - Single Tree: This sample demonstrates how to initialize the igTree control with the Drag-and-Drop feature enabled.
Drag and Drop - Multiple Trees: This sample demonstrates how to drag-and-drop nodes between two igTrees.
API and Events: This sample demonstrates how to use igTree API.
View on GitHub