Cdk DragDrop for Polygon Boundry

Question

I'm trying to build a custom boundry shape for the cdk Drag Drop directive

I tried to set the boundry as a polygon, I've put a sample code in the stackblitz for quick understanding on the problem, ie the boundry of the drag restriction is not respected when its a polygon.

https://stackblitz.com/edit/ifyv2h?file=src%2Fexample%2Fcdk-drag-drop-boundary-example.css

Answer 1

i will say try with the cdkDragStart and cdkDragMove events and manually check the postion for example

<div class="example-boundary" (cdkDragStart)="onDragStart()" (cdkDragMove)="onDragMove($event)">
  <div class="example-box" cdkDrag>
    This is a draggable element
  </div>
</div>

with

onDragStart() {
    this.boundary = document.querySelector('.example-boundary');
  }

  onDragMove(event: CdkDragMove) {
    const boundaryRect = this.boundary.getBoundingClientRect();
    const elementRect = event.source.element.nativeElement.getBoundingClientRect();

    const isInsideBoundary = elementRect.left >= boundaryRect.left &&
      elementRect.right <= boundaryRect.right &&
      elementRect.top >= boundaryRect.top &&
      elementRect.bottom <= boundaryRect.bottom;

    if (!isInsideBoundary) {
      event.source._dragRef.reset();
    }
  }

also as far as i know clip-path property only response to the visual rendering of the element, does not restrict the movement of the element in actuality . try this approach and let me know.