New to Kendo UI for Angular? Start a free 30-day trial

DragAndDropDirective

Directive

Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances (see example).

Triggers the nodeDragStart, nodeDrag, nodeDrop, nodeDragEnd, addItem and removeItem events when you perform the corresponding actions.

Definition

Package:@progress/kendo-angular-treeview

Selector:[kendoTreeViewDragAndDrop]

Syntax:

html

<kendo-treeview
   kendoTreeViewDragAndDrop
   [dropZoneTreeViews]="treeView"
>
</kendo-treeview>

Inputs

allowCopy

boolean

Specifies whether the removeItem event fires after the user drops an item while pressing the ctrl key. If enabled, the removeItem event does not fire on the source TreeView (see example).

Default:

false

autoScroll

boolean | DragAndDropScrollSettings

Controls the auto-scrolling behavior during drag-and-drop (see example). Enabled by default. To turn off auto-scrolling, set this property to false.

By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container. You can override the step and interval by providing a DragAndDropScrollSettings object.

Default:

true

dropZoneTreeViews

TreeViewComponent[]

Specifies the TreeViewComponent instances into which the user can drop dragged items from the current TreeViewComponent (see example).

Default:

[]

startDragAfter

number

Specifies the distance in pixels from the initial item pointerdown event before dragging starts. The nodeDragStart and all subsequent TreeView drag events do not fire until dragging begins.

Default: