New to Kendo UI for AngularStart a free 30-day trial

DragTargetDirective

Represents the Kendo UI DragTarget directive for Angular. Use this directive to make an element draggable.

Selector

[kendoDragTarget]

Export Name

Accessible in templates as #kendoDragTargetInstance="kendoDragTarget"

Inputs

NameTypeDefaultDescription

autoScroll

boolean | AutoScrollOptions

true

Sets the automatic container scrolling behavior when close to the edge. See example.

cursorStyle

string

'move'

Sets the cursor style of the drag target. Accepts same values as the CSS cursor property.

dragData

DragTargetDataFn

Defines a callback function used for attaching custom data to the drag target. The data is available in the events of the respective DropTarget or DropTargetContainer directives. The current DragTarget HTML element and its dragTargetId will be available as arguments.

dragDelay

number

0

Sets the delay in milliseconds before dragging begins. See example.

dragTargetId

string | DragTargetIdFn

Sets a unique identifier for the drag target.

hint

boolean | HintSettings

false

Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. (see example).

mode

DragMode

'auto'

Specifies whether to use the default dragging behavior or handle it manually.

restrictByAxis

DragAxis

Restricts dragging to horizontal or vertical only. Applies when mode is auto. See example.

threshold

number

0

Sets the number of pixels the pointer must move before dragging starts. Applies when manualDrag is false. See example.

Events

NameTypeDescription

onDrag

EventEmitter<DragTargetDragEvent>

Fires while the user drags the drag target element.

onDragEnd

EventEmitter<DragTargetDragEndEvent>

Fires when dragging of the drag target ends and the element is released.

onDragReady

EventEmitter<DragTargetDragReadyEvent>

Fires when the drag target's dragDelay has passed and the user can drag the element.

onDragStart

EventEmitter<DragTargetDragStartEvent>

Fires when dragging of the drag target element begins.

onPress

EventEmitter<DragTargetPressEvent>

Fires when the user presses the drag target element.

onRelease

EventEmitter<DragTargetReleaseEvent>

Fires when DragTarget is released, either by dropping it on a drop target or by releasing the mouse button.

In this article
SelectorExport NameInputsEvents
Not finding the help you need?
Contact Support