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

Question

是否可以将 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 中的所有内容基本上都是矩形，这是否意味着圆形或非常接近圆形的限制是不可能的？

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

Answer 1

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

但是，您可能会监控拖动，对圆形边界进行“ HitTest ”，并在超出边界时自行停止拖动。

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

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

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

• 为每个拖动事件(基本上是每个像素遍历)可能很昂贵 - 你的“ HitTest ”最好非常高效。

所以，这显示了一般概念，但仍有很多问题需要解决。

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

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