Search code examples
javascriptangulardrag-and-dropangular-material

How can I set the default position of a draggable element using Angular Material DragAndDrop?

I would like to set draggable elements' default position within a container.

Example: https://material.angular.io/cdk/drag-drop/overview#restricting-movement-within-an-element

How can I position the element e.g. center-center?

Solution

  • As of Angular Material version 8, the following input is available:

    @Input('cdkDragFreeDragPosition') freeDragPosition: { x: number; y: number; }

    Sets the position of a CdkDrag that is outside of a drop container. Can be used to restore the element's position for a returning user.

    https://material.angular.io/cdk/drag-drop/api#CdkDrag

    And an example can be found at the following: https://angular-tft6n5.stackblitz.io