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

Question

我正在使用 Angular 10 创建一个实时系统，其中用户 1 在屏幕上拖动项目，并且项目的位置在用户 2 屏幕上更新。我为此使用@angular/cdk/drag-drop。

我通过绑定cdkDragFreeDragPosition到在用户 1 删除对象时更新的对象xPos和yPos属性来更新用户 2 屏幕上的位置：

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

这可行，但是用户 2 的对象位置会跳跃而不是平滑地移动到有点难看的新位置。

请问有没有办法让用户 2 屏幕上的对象从它的初始位置平滑地移动到新位置？

Answer 1

根据docs，这可以通过简单地添加transition到.cdk-drag类来实现。

但是，这也会影响框的“手动”拖动 - 在用户拖动框时以“延迟”的形式影响。所以你必须排除这个.cdk-drag-dragging类，它被添加到当前被拖动的元素中：

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

当然，在某些其他情况下，您可能希望根据您的用例包含/排除其他类，但这应该会给您基本的想法。