Drag Target Container

The DragTargetContainer directive is an extended DragTarget 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 directive to the container element.
2. Set the 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.

Events

The DragTargetContainer directive emits a number of events for each of its drag targets upon user interaction:

• onPress—Fires when a drag target is pressed.
• onDragReady—Fires when the current target's dragDelay has passed and the user is able to drag the element.
• onDragStart—Fires when the dragging of the current target begins.
• onDrag—Fires while a target is being dragged.
• onRelease—Fires when a drag target is released after being pressed or dragged.
• onDragEnd—Fires when the dragging of the current target ends and the user releases it.

Suggested Links

• API Reference of the DragTargetContainerDirective