Как ограничить элемент перетаскивания между одной границей в Angular Material 7 CDK?

В моем текущем проекте я пытаюсь реализовать перетаскивание элемента из одной позиции в другую внутри одного div. Для этого я использую функцию перетаскивания Angular Material 7 CDK. он перетаскивает всю страницу, но хочет перетаскивать только внутри определенного div. Но я не видел никакой возможности контролировать границу в Angular Material 7 CDK перетаскиванием.

Может ли кто-нибудь сказать мне, как контролировать границу в материале или предложить другие плагины, которые можно компактно использовать для angular 7.?

Спасибо.


angular drag-and-drop angular7 angular-material-6 angular-dragdrop
person Manikandan Thangaraj    schedule 13.12.2018    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете использовать cdkDragBoundary, который будет полезен для предотвращения возможности перетаскивания пользователем элемента за пределы другого элемента.

Вы можете использовать его следующим образом:

<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

Подробнее об этом можно узнать здесь. Ограничение материалов для углов движение внутри элемента

person Borad Akash    schedule 02.01.2019