Angular CDK 拖放 - 是否可以创建圆形边界？

Question

是否可以将 Angular 拖放元素限制为圆形边界？

看下面的documentation

限制元素内的移动

如果您想阻止用户将 cdkDrag 元素拖到另一个元素之外，您可以将 CSS 选择器传递给 cdkDragBoundary 属性。该属性通过接受选择器并查找 DOM 直到找到与其匹配的元素来工作。如果找到匹配项，它将被用作元素无法拖动的边界。当 cdkDrag 放置在 cdkDropList 中时，也可以使用 cdkDragBoundary。

我尝试将 css（参见 stackblitz）更改为循环，但我从结果中的理解是这只会改变 DOM 元素的外观，而不是边界。

DOM 中的所有内容本质上都是一个矩形，这是否意味着圆形或非常接近圆形的限制是不可能的？

https://stackblitz.com/edit/angular-gughvc

Answer 1

据我所知，没有直接的方法可以做你想做的事。

但是，您可以监控拖动，对圆形边界进行“命中测试”，并在超出边界时自行停止拖动。

我在https://stackblitz.com/edit/angular-ut9fgz做了一个快速而简单的测试

这会在圆的中点停止拖动，但是：

• 它不仅禁止越过边界，它还取消了 拖动。

• 为每个拖动事件（基本上每个像素 遍历）可能很昂贵-您的“命中测试”最好非常 高效。

所以，这显示了一般概念，但仍有很多工作要做。

除了官方文档，以下页面可能会有所帮助：

https://grokonez.com/frontend/angular/angular-7/angular-7-drag-and-drop-example-angular-material-cdk

Cancel drag on key press Angular cdk Drag and Drop