DragTargetContainerDirective

Represents the Kendo UI DragTargetContainer directive for Angular. Use this directive to make multiple elements draggable inside a container.

html

<ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
  <li class="my-draggable"> Item 1</li>
  <li class="my-draggable"> Item 2</li>
  <li class="my-draggable"> Item 3</li>
</ul>

Selector

[kendoDragTargetContainer]

Export Name

Accessible in templates as #kendoDragTargetContainerInstance="kendoDragTargetContainer"

Inputs

Name	Type	Default	Description
cursorStyle	string	'move'	Sets the cursor style of the drag targets. Accepts same values as the CSS cursor property.
dragData	DragTargetDataFn		Sets a callback function to return custom data for DropTarget events. It exposes the current DragTarget HTML element, its dragTargetId, and its index in the collection of drag targets as arguments.
dragDelay	number	0	Sets the delay in milliseconds before dragging begins. See example.
dragDisabled	boolean	false	Disables dragging of drag targets in the container when set to true.
dragHandle	string		Sets a selector for elements inside each drag target to use as drag handles.
dragTargetFilter	string		Sets a selector for elements in the container to make them draggable. The possible values include any DOM selector. See example.
dragTargetId	DragTargetIdFn		Sets a unique identifier for each drag target. It exposes the current drag target HTML element and its index in the collection of drag targets as arguments.
hint	boolean | HintSettings	false	Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. See example.
mode	DragMode	'auto'	Sets whether to use the default dragging behavior or handle it manually.
threshold	number	0	Sets the number of pixels the pointer must move before dragging starts. See example.

Events

Name	Type	Description
onDrag	EventEmitter<DragTargetDragEvent>	Fires while the user drags a drag target element.
onDragEnd	EventEmitter<DragTargetDragEndEvent>	Fires when dragging of a drag target ends and the element is released.
onDragReady	EventEmitter<DragTargetDragReadyEvent>	Fires when a drag target's dragDelay has passed and the user can drag the element.
onDragStart	EventEmitter<DragTargetDragStartEvent>	Fires when dragging of a drag target element begins.
onPress	EventEmitter<DragTargetPressEvent>	Fires when the user presses a drag target element.
onRelease	EventEmitter<DragTargetReleaseEvent>	Fires when the user releases a drag target element after pressing it.

Methods

notify
Notifies the DragTargetContainer that its content has changed.