使用 @angular/cdk/drag-drop 中的 cdkDragFreeDragPosition 平滑移动到 x 和 y 位置
Smooth move to x and y position with cdkDragFreeDragPosition in @angular/cdk/drag-drop
我正在使用 Angular10 创建一个实时系统，其中用户 1 在屏幕上拖动项目，项目的位置在用户 2 屏幕上更新。我为此使用 @angular/cdk/drag-drop。
我正在更新用户 2 屏幕上的位置，方法是将 cdkDragFreeDragPosition 绑定到对象的 xPos 和 yPos 属性，这些属性在用户 1 删除对象时更新：
[cdkDragFreeDragPosition]="{x: wsc.xPos, y: wsc.yPos}"
这可行，但是用户 2 的对象的位置跳跃而不是平滑地移动到有点难看的新位置。
请问有没有办法让用户 2 屏幕上的对象从初始位置平滑移动到新位置？
根据 docs，这可以通过简单地将 transition 添加到 .cdk-drag class.
来实现
但是，这也会影响框的“手动”拖动 - 在用户拖动框时会产生某种“延迟”。所以你要排除.cdk-drag-dragging class，它被添加到当前正在拖动的元素中：
.cdk-drag:not(.cdk-drag-dragging) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
当然，在其他一些情况下，您可能希望根据您的用例包含/排除其他 classes，但这应该能为您提供基本思路。
我正在使用 Angular10 创建一个实时系统，其中用户 1 在屏幕上拖动项目，项目的位置在用户 2 屏幕上更新。我为此使用 @angular/cdk/drag-drop。
我正在更新用户 2 屏幕上的位置，方法是将 cdkDragFreeDragPosition 绑定到对象的 xPos 和 yPos 属性，这些属性在用户 1 删除对象时更新：
[cdkDragFreeDragPosition]="{x: wsc.xPos, y: wsc.yPos}"
这可行，但是用户 2 的对象的位置跳跃而不是平滑地移动到有点难看的新位置。
请问有没有办法让用户 2 屏幕上的对象从初始位置平滑移动到新位置？
根据 docs，这可以通过简单地将 transition 添加到 .cdk-drag class.
但是，这也会影响框的“手动”拖动 - 在用户拖动框时会产生某种“延迟”。所以你要排除.cdk-drag-dragging class，它被添加到当前正在拖动的元素中：
.cdk-drag:not(.cdk-drag-dragging) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
当然，在其他一些情况下，您可能希望根据您的用例包含/排除其他 classes，但这应该能为您提供基本思路。