用于多边形边界的 Cdk DragDrop

Question

我正在尝试为 cdk 拖放指令构建自定义边界形状

我尝试将边界设置为多边形，我在 stackblitz 中放置了示例代码以便快速理解问题，即当其为多边形时，不遵守拖动限制的边界。

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

Answer 1

我会说尝试使用 cdkDragStart 和 cdkDragMove 事件并手动检查位置例如

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

与

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();
    }
  }

据我所知，clip-path属性仅响应元素的视觉渲染，实际上并不限制元素的移动。 尝试这种方法并让我知道。