Manual Drag

In complex scenarios you could take full control over the DragTarget directive behavior by setting its mode option to manual. In this case the built-in internal logic for moving the element will not be executed. Adding custom logic, styles and positioning is completely in the hands of the developer and is achieved by handling the corresponding DragTarget events.

Dragging between Scrollable Containers

By default, when the DragTarget is nested inside a scrollable container, its movement is restricted within the parent boundaries. To override this behavior, you could manually handle the drag action and apply the needed styling and positioning.

The following example demonstrates this approach by applying position: fixed to the target element.

Setup

To calculate the DragTarget position correctly when position: fixed is set, you have to retrieve the current pointer coordinates in the drag event handler. Follow the steps listed below, to achieve the above setup:

1. Set the mode property to manual in order to take full control over the drag action.

2. Handle the onDragStart event to get the current DragTarget HTML element. Use this event to update the element position to fixed.

Copy Code    public handleDragStart(ev: DragTargetDragStartEvent): void {
        this.dragIndex = ev.dragTargetId;
        this.dragTarget = ev.dragTarget;
        this.renderer.setStyle(this.dragTarget, 'position',  'fixed');
    }

1. Handle the onDrag event to get the position of the DragTarget and to apply the left and top styles to the element.

Copy Code    public handleDrag(ev: DragTargetDragEvent): void {
        const position = {
            x: ev.dragEvent.clientX,
            y: ev.dragEvent.clientY 
        };
        this.renderer.setStyle(this.dragTarget, 'left', `${position.x}px`);
        this.renderer.setStyle(this.dragTarget, 'top', `${position.y}px`);
    }

1. Handle the onRelease event to remove the fixed position. This is recommend in order to prevent unwanted behavior.

Copy Code    public handleRelease(ev): void {
        this.dragTarget && this.renderer.removeStyle(this.dragTarget, 'position');
    }

Suggested Links

• API Reference of the DragTarget
• API Reference of the DropTarget