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.

Change Theme

Theme

Loading ...

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