# Drop Target Container

The [`DropTargetContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective) directive is an extended [`DropTarget`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetdirective) directive. It enables you to configure multiple elements within a container as drop targets. This directive is also suitable for scenarios in which the drop target elements are not accessible in the template.

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

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

The following example demonstrates the approach in action.

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

## Events

The [`DropTargetContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective) directive emits a number of events when a valid drag target interacts with any of its drop targets:

* [`onDragEnter`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective#ondragenter)—Fires when a valid drag target enters a drop target.
* [`onDragOver`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective#ondragover)—Fires while a valid drag target is being dragged over a drop target.
* [`onDragLeave`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective#ondragleave)—Fires when a valid drag target leaves a drop target.
* [`onDrop`](https://www.telerik.com/kendo-angular-ui-develop/components/utils/api/droptargetcontainerdirective#ondrop)—Fires when a valid drag target is dropped over a drop target.

## Suggested Links

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