Угловая граница CDK Drag and Drop - PullRequest
1 голос
/ 11 марта 2019

У меня есть вопрос о функции перетаскивания Angular 7 CDK. Мне нужно следующее: мне нужен изменяемый размер прямоугольник div внутри контейнера, который я хочу использовать в качестве граничного элемента (cdkDragBoundary) для моего перетаскивания. Так что все довольно просто.

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

Прямоугольник позиционируется абсолютно, поэтому я использую свойства width и left, чтобы определить его размер и положение.

Проблема: Пока я не изменяю размер прямоугольника, я не могу перетащить его из граничного элемента, поэтому он отлично работает. Но когда я изменяю размер div (вручную в Chrome или из кода), cdkDrag полагает, что прямоугольник все еще имеет свой первоначальный размер, и обрабатывает мое перетаскивание соответственно. Если я помещу все это во вкладку, переключу вкладку и вернусь, то cdkDrag будет переинициализирован, поэтому граница снова будет работать, но я понятия не имею, как это сделать из кода ..

Итак, вопрос вкратце: как я могу заставить cdkDrag всегда использовать фактический размер перетаскиваемого элемента, если он изменился?

Спасибо за помощь!

1 Ответ

0 голосов
/ 12 марта 2019

Хорошо, я могу понять это самостоятельно.Это взлом, но я не нашел другого пути.Итак, кажется, что размеры перетаскиваемого элемента кэшируются после его первого перетаскивания, поэтому мне просто нужно было очистить его в обработчике, что вынудило следующее перетаскивание переоценить размеры:)

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