Плавное перемещение в положение x и y с помощью cdkDragFreeDragPosition в @angular/cdk/drag-drop

Я создаю систему реального времени с Angular 10, где пользователь 1 перетаскивает элементы на экран, а местоположение элемента обновляется на экране пользователя 2. Я использую для этого @angular/cdk/drag-drop.

Я обновляю позицию на экране пользователя 2, привязывая cdkDragFreeDragPosition к свойствам объекта xPos и yPos, которые обновляются при удалении объекта пользователем 1:

[cdkDragFreeDragPosition]="{x: wsc.xPos, y: wsc.yPos}"

Это работает, но позиция объекта для пользователя 2 прыгает, а не плавно перемещается в новую позицию, что немного некрасиво.

Есть ли способ заставить объект на экране пользователя 2 плавно перемещаться из исходного положения в новое положение, пожалуйста?


angular angular-material angular-cdk-drag-drop
person Doug    schedule 08.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документам, этого можно добиться, просто добавив transition в .cdk-drag класс.

Однако это также повлияет на ручное перетаскивание поля, что приведет к некоторой задержке, пока пользователь перетаскивает поле. Таким образом, вы должны исключить класс .cdk-drag-dragging, который добавляется к перетаскиваемым в данный момент элементам:

.cdk-drag:not(.cdk-drag-dragging) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Конечно, могут быть и другие случаи, когда вы можете захотеть включить/исключить другие классы в зависимости от вашего варианта использования, но это должно дать вам основную идею.

person TotallyNewb    schedule 09.09.2020