Угловая граница перетаскивания CDK

У меня вопрос о функции перетаскивания 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 всегда использовать фактический размер перетаскиваемого элемента, если он изменился?

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


angular angular7 angular-cdk
person slashpm    schedule 11.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

protected onDragDropped(ev: Event) {
    ...
    ev['source']._dragRef._previewRect = null;
    ...
}
person slashpm    schedule 12.03.2019
comment
спасибо за это. это помогло. У меня есть другой запрос, после изменения размера я вижу, что перетаскивается только исходный размер div, но щелчок по новой ширине или высоте области не перетаскивается - person Nyfer; 10.01.2020