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

【问题标题】：How to keep size of a row while dragging?拖动时如何保持行的大小？
【发布时间】：2020-03-15 12:45:03
【问题描述】：

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

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

这是我在 stackblitz 上尝试过的：

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

【问题讨论】：

标签： angular drag-and-drop angular-cdk

【解决方案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);
 }

【讨论】：

非常感谢这也是我的想法和所做的

【解决方案2】：

您无需指定拖动预览，如果您不使用它，则默认预览将与原始预览大小相同。请参阅我从您的代码中分叉的 StackBlitz：

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

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

【讨论】：

这也是一个很好的解决方案。但是这里的问题是当你拖动时，选择的下拉元素消失了。它变成无，不管你之前选择了什么