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

Question

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

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

Спасибо.

Answer 1

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

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

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

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