Angular CDK Drag and Drop boundary

1
votes

I have a question about Angular 7 CDK drag & drop feature. What I want is the following: I need a resizable rectangle div inside a container which I want to use as the boundary element (cdkDragBoundary) for my drag & drop. So it is quite simple.

<div class="drag-boundary">
    <div cdkDrag cdkDragLockAxis="x" (cdkDragEnded)="onDragDropped($event)" 
         cdkDragBoundary=".drag-boundary" />
    </div>
</div>

The rectangle is absolute positioned so I'm using width and left properties to size and position it.

Problem: As long as I don't change the size of the rectangle, I cannot drag it out of the boundary element, so it is perfectly working. But when I change the size of the div (by hand in Chrome or from code), cdkDrag believes that the rectangle still has its original size and is handling my drag accordingly.. If I put the whole thing in a tab, and switch tab and come back, then cdkDrag gets reinitialized so the boundary works again but I have no clue how to do it from code..

So the question in short is how could I make cdkDrag always use the actual size of the draggable element if it has changed?

Thanks for help!

1
angularangular7angular-cdk

1 Answers

2
votes

Ok, I could figure it out on my own. It is a hack but I found no other way. So, it seems that the draggable item's dimensions get cached after its first drag so I just had to clear it in the handler, forcing the next drag to reevaluate the dimensions :)

protected onDragDropped(ev: Event) {
    ...
    ev['source']._dragRef._previewRect = null;
    ...
}