# Drag Target Container

The [`DragTargetContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective) directive is an extended [`DragTarget`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetdirective) directive. It enables you to configure multiple elements within a container as drag targets. Thе directive is also suitable for scenarios in which the drag target elements are not directly accessible in the template.

To configure multiple elements within a container as drag targets, follow the steps listed below:

1. Apply the [`DragTargetContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective) directive to the container element.
2. Set the [`dragTargetFilter`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#dragtargetfilter) property and pass a `string` selector for the elements within the container, which will be configured as draggable targets.

The following example demonstrates the approach in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/draganddrop/containers/drag-container/source.txt)

## Events

The [`DragTargetContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective) directive emits a number of events for each of its drag targets upon user interaction:

* [`onPress`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#onpress)—Fires when a drag target is pressed.
* [`onDragReady`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#ondragready)—Fires when the current target's [`dragDelay`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#dragdelay) has passed and the user is able to drag the element.
* [`onDragStart`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#ondragstart)—Fires when the dragging of the current target begins.
* [`onDrag`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#ondrag)—Fires while a target is being dragged.
* [`onRelease`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#onrelease)—Fires when a drag target is released after being pressed or dragged.
* [`onDragEnd`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective#ondragend)—Fires when the dragging of the current target ends and the user releases it.

## Suggested Links

* [API Reference of the DragTargetContainerDirective](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/dragtargetcontainerdirective)