• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

DragTargetContainerDirective

Represents the Kendo UI DragTargetContainer directive for Angular. Used to configure multiple elements as draggable.

<ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
   <li class="my-draggable">foo</li>
</ul>

Selector

[kendoDragTargetContainer]

Export Name

Accessible in templates as #kendoDragTargetContainerInstance="kendoDragTargetContainer"

Inputs

NameTypeDefaultDescription

dragData

DragTargetDataFn

Defines a callback function which returns custom data passed to the 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

Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).

dragDisabled

boolean

false

If set to true, the dragging of DragTargets within the container will be disabled.

dragHandle

string

Specifies a selector for elements within each DragTarget which will be configured as drag handles.

dragTargetFilter

string

Specifies a selector for elements within a container which will be configured as draggable (see example). The possible values include any DOM selector.

dragTargetId

DragTargetIdFn

Defines a unique identifier for each drag target. It exposes the current DragTarget 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'

Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.

threshold

number

0

The number of pixels the pointer moves in any direction before the dragging starts (see example).

Events

NameTypeDescription

onDrag

EventEmitter<DragTargetDragEvent>

Fires while the user drags a DragTarget element.

onDragEnd

EventEmitter<DragTargetDragEndEvent>

Fires when the dragging of a DragTarget ends and the element is released.

onDragReady

EventEmitter<DragTargetDragReadyEvent>

Fires when a DragTarget's dragDelay has passed and the user is able to drag the element.

onDragStart

EventEmitter<DragTargetDragStartEvent>

Fires when the dragging of a DragTarget element begins.

onPress

EventEmitter<DragTargetPressEvent>

Fires when the user presses a DragTarget element.

onRelease

EventEmitter<DragTargetReleaseEvent>

Fires when the user releases a DragTarget element after being pressed.

Methods

notify

Used for notifying the DragTargetContainer that its content has changed.

In this article

Not finding the help you need?