Как сохранить размер строки при перетаскивании?

Question

У меня есть пример приложения, где я использую cdk-Dragging. Проблема в том, что когда я перетаскиваю его, применяется класс с именем cdk-drag-preview, который уменьшает размер перетаскиваемой строки.

Вы можете видеть, что когда Я пытаюсь перетащить, перетаскиваемый ряд становится меньше, пока я его не уроню. Я хочу, чтобы он был таким же большим, как и другие, и никогда не менялся. Я пытался добавить свойства в этот класс, но не смог заставить его работать. Как я могу сохранить ширину этой строки?

Вот что я попробовал на stackblitz:

https://stackblitz.com/edit/angular-gbls7d-or2y5z?file=src / app / cdk-drag-drop -связный-сортировочный-пример. html

Answer 1

Вы можете применить ширину и высоту css стили свойств в .cdk-drag-preview , как показано ниже.

.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> вашего кода. Тогда общий предварительный просмотр имеет тот же размер, что и исходная строка. Смотрите скриншот: