How restrict the drag element between one boundary in Angular Material 7 CDK?

Question

For my current project am trying to implement the drag element one position to another position inside one div. For this I am using the Angular Material 7 CDK drag and drop features. it dragging all over the page but want to only drag inside particular div. But I didn't see any option to control the boundary in Angular Material 7 CDK drag and drop.

Can anyone tell me how to control boundary in material or suggestion some other plugins which is compactable for angular 7. ?

Thanks.

Answer 1

You can use cdkDragBoundary which will be useful to prevent the user from being able to drag an element outside of another element.

You can use it as following:

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

You can read more about it from here Angular Material Restricting movement within an element