使用 @angular/cdk/drag-drop 中的 cdkDragFreeDragPosition 平滑移動到 x 和 y 位置

Question

我正在使用 Angular 10 創建一個實時系統，其中用戶 1 在屏幕上拖動項目，項目的位置在用戶 2 屏幕上更新。 我為此使用@angular/cdk/drag-drop 。

我通過將cdkDragFreeDragPosition綁定到對象的xPos和yPos屬性來更新用戶 2 屏幕上的位置，這些屬性在用戶 1 刪除對象時更新：

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

這是可行的，但是用戶 2 的對象位置會跳躍而不是平滑地移動到新位置，這有點難看。

有沒有辦法讓用戶 2 屏幕上的對象從它的初始位置平滑移動到新位置？

Answer 1

根據docs ，這可以通過簡單地向.cdk-drag類添加transition來實現。

但是，這也會影響框的“手動”拖動 - 在用戶拖動框時會產生“延遲”。 所以你必須排除.cdk-drag-dragging類，它被添加到當前被拖動的元素中：

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

當然，在其他一些情況下，您可能希望根據您的用例包含/排除其他類，但這應該給您基本的想法。