如何在拖动时保持行的大小？

Question

我有一个使用 cdk-Dragging 的示例应用程序。问题是当我拖动它时，正在应用一个名为 cdk-drag-preview 的 class 并使拖动的行变小。

上面你可以看到，当我尝试拖动时，拖动的行越来越小，直到我把它放下。我希望它和其他的一样大，永远不变。我试图向此 class 添加属性，但无法使其工作。我怎样才能保持这一行的宽度？

这是我在 stackblitz 上尝试过的：

https://stackblitz.com/edit/angular-gbls7d-or2y5z?file=src/app/cdk-drag-drop-connected-sorting-example.html

Answer 1

您可以在 .cdk-drag-preview 中应用宽度和高度 css 属性样式，如下所示。

.cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
   width:87%; // you can add in px also 
   height:11%; // this line added
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
          0 8px 10px 1px rgba(0, 0, 0, 0.14),
          0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }

Answer 2

您不需要指定拖动预览，如果您不指定，则默认预览将与原始尺寸相同。请参阅我从您的代码中分叉出来的 StackBlitz：

https://stackblitz.com/edit/angular-gbls7d-wcsibj

我注释掉了您代码的 <span *cdkDragPreview> 部分。然后整体预览与原始行具有相同的大小。见截图：

如何在拖动时保持行的大小？

How to keep size of a row while dragging?

drag-and-drop

angular

angular-cdk