Угловое перетаскивание CDK - возможно ли создать круговую границу? - PullRequest
Новая
       17

Угловое перетаскивание CDK - возможно ли создать круговую границу?

0 голосов
/ 13 мая 2019

Можно ли ограничить угловой элемент перетаскивания круговой границей?

Просмотр документации ниже

Ограничение движения внутри элемента

Если вы хотите запретить пользователю перетаскивать элемент cdkDrag за пределы другого элемента, вы можете передать селектор CSS в атрибут cdkDragBoundary. Атрибут работает, принимая селектор и просматривая DOM, пока не найдет соответствующий ему элемент. Если совпадение найдено, оно будет использоваться в качестве границы, за пределы которой элемент не может быть перетащен. cdkDragBoundary также можно использовать, когда cdkDrag находится внутри cdkDropList.

Я попытался изменить css (см. Stackblitz), чтобы он был круговым, но, насколько я понимаю, в результате это только меняет внешний вид, а не границу элемента DOM.

Поскольку все в DOM, по сути, является прямоугольником, это означает, что круглое или очень близкое к окружности ограничение невозможно?

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

1 Ответ

1 голос
/ 13 мая 2019

Насколько я могу судить, прямого способа сделать то, что вы хотите, нет.

Тем не менее, вы, вероятно, могли бы отслеживать перетаскивание, выполнить "тест на удар" для вашей круговой границы и остановить перетаскивание.Вы сами, когда граница превышена.

Я сделал быстрый и грязный тест на https://stackblitz.com/edit/angular-ut9fgz

Это останавливает перетаскивание в средней точке круга, но:

  • Он не просто запрещает проходить границу, он отменяет перетаскивание.

  • Имеет функцию обратного вызова для каждого события перетаскивания (по существу, каждого пройденного пикселя)может быть дорогим - ваш «тест на попадание» лучше быть очень эффективным.

Итак, это показывает общую концепцию, но многое еще предстоит разработать.

Помимо официальной документации, могут быть полезны следующие страницы:

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

Отмена перетаскивания при нажатии клавиши Angular cdk Drag and Drop

...