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

1
votes

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.

1
angulardrag-and-dropangular7angular-material-6angular-dragdrop

1 Answers

8
votes

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