Angular CDK 拖放 - 是否可以创建圆形边界？
Angular CDK drag and drop - is it possible to create circular boundary?
是否可以将 Angular 拖放元素限制为圆形边界？
看下面的documentation
Restricting movement within an element
If you want to stop the user from being able to drag a cdkDrag element outside of another element, you can pass a CSS selector to the cdkDragBoundary attribute. The attribute works by accepting a selector and looking up the DOM until it finds an element that matches it. If a match is found, it'll be used as the boundary outside of which the element can't be dragged. cdkDragBoundary can also be used when cdkDrag is placed inside a cdkDropList.
我尝试将 css（请参阅 stackblitz）更改为圆形，但我对结果的理解是这只会改变外观而不是 DOM 元素的边界。
由于 DOM 中的所有内容基本上都是矩形，这是否意味着圆形或非常接近圆形的限制是不可能的？
据我所知，没有直接的方法可以做你想做的事。
但是，您或许可以监控拖动，为您的圆形边界做一个 "hit test"，并在超出边界时自行停止拖动。
我在 https://stackblitz.com/edit/angular-ut9fgz
进行了 quick-and-dirty 测试
这会在圆的 mid-point 处停止拖动，但是：
不仅禁止越界，还取消了
拖.
为每个拖动事件（基本上是每个像素
traversed) 可能很昂贵 - 你的 "hit test" 最好非常
高效.
所以，这显示了一般概念，但仍有很多问题需要解决。
除了官方文档，以下页面可能会有帮助：
https://grokonez.com/frontend/angular/angular-7/angular-7-drag-and-drop-example-angular-material-cdk
是否可以将 Angular 拖放元素限制为圆形边界？
看下面的documentation
Restricting movement within an element
If you want to stop the user from being able to drag a cdkDrag element outside of another element, you can pass a CSS selector to the cdkDragBoundary attribute. The attribute works by accepting a selector and looking up the DOM until it finds an element that matches it. If a match is found, it'll be used as the boundary outside of which the element can't be dragged. cdkDragBoundary can also be used when cdkDrag is placed inside a cdkDropList.
我尝试将 css（请参阅 stackblitz）更改为圆形，但我对结果的理解是这只会改变外观而不是 DOM 元素的边界。
由于 DOM 中的所有内容基本上都是矩形，这是否意味着圆形或非常接近圆形的限制是不可能的？
据我所知，没有直接的方法可以做你想做的事。
但是，您或许可以监控拖动，为您的圆形边界做一个 "hit test"，并在超出边界时自行停止拖动。
我在 https://stackblitz.com/edit/angular-ut9fgz
进行了 quick-and-dirty 测试这会在圆的 mid-point 处停止拖动，但是：
不仅禁止越界，还取消了 拖.
为每个拖动事件（基本上是每个像素 traversed) 可能很昂贵 - 你的 "hit test" 最好非常 高效.
所以，这显示了一般概念，但仍有很多问题需要解决。
除了官方文档，以下页面可能会有帮助：
https://grokonez.com/frontend/angular/angular-7/angular-7-drag-and-drop-example-angular-material-cdk