В Angular Material CDK Drag Drop, как предотвратить автоматическое изменение порядка элементов при перемещении элемента?

Заранее спасибо. Вот в чем проблема:

Я использую Angular Material CDK Drag Drop (версия: @ angular / ckd: 7.3.7)

В документации сказано: «Элементы будут автоматически переупорядочиваться при перемещении элемента».

У меня вопрос: как предотвратить автоматическое изменение расположения элементов при перемещении элемента?

Вот анимированный gif-файл, который мне не нужен. Это шахматная доска, которую я сделал, и вы можете видеть, что «элементы (шахматные фигуры) автоматически переставляются, когда элемент (шахматная фигура) перемещается»

Вот анимированный gif того, что я хочу. Я хочу, чтобы предметы (шахматные фигуры) не переставлялись при перемещении элемента (шахматной фигуры).

Вот стек с кодом


angular drag-and-drop angular-material angular-cdk angular-dragdrop
person user5369    schedule 07.06.2019    source источник

Ответы (4)


arrow_upward
1
arrow_downward

просто создайте empy cdkDragPlaceholder, ну, вам нужно вложить img в div

<div class="square"
     [ngClass]="{'white': square.row % 2 === square.col %2,
  'black': square.row % 2 !== square.col % 2}"
  cdkDropList
   ...>
  <div cdkDrag cdkDragBoundary=".board">
    <img *ngIf="square.piece"
       class="piece"
       src="{{square.piece.img()}}"
       />
       <!---this is a empty dragPlaceHolder-->
       <div *cdkDragPlaceholder></div>
   </div>
</div>
person Eliseo    schedule 30.04.2020

arrow_upward
0
arrow_downward

Начиная с Angular 8, это поведение можно отключить, добавив cdkDropListSortingDisabled

person Abdo Driowya    schedule 27.04.2020
comment
Это неправильный ответ, предметы тоже меняются местами, когда вы пытаетесь бросить предмет. Оп ожидает, что предметы вообще не будут двигаться во время падения. - person qubits; 27.04.2020

arrow_upward
0
arrow_downward

So: 

.cdk-drag-placeholder { display:none; }

Должен гарантировать, что объект не будет виртуально вставлен в DOM, ограничивая такое поведение.

Я думал, что это не работает с динамическими списками, но очевидно .cdk-drag-placeholder {display: none; } работает.

Если это не работает, это означает, что вы пытаетесь применить стили к компоненту, и они были инкапсулированы внутри компонента, чтобы избежать утечки стилей. Недавно добавленный элемент DOM не «видит» примененный стиль. Решением было бы поместить ViewEncapsulation.None таким образом, чтобы позволить стилю просачиваться из компонента и настроить правило css на что-то вроде:

#my-special-list {
    & > .cdk-drag-placeholder {
        display: none !important;
    }
}

Чтобы убедиться, что он не мешает стилям извне компонента.

person qubits    schedule 25.04.2020

arrow_upward
0
arrow_downward

Перемещение элементов осуществляется путем добавления к элементам встроенного стиля с правилом transform: translate3d(Xpx, Ypx, Zpx);.

Вы можете перезаписать это правило встроенного стиля внутри CSS для элемента, установив для него нулевые значения по умолчанию и добавив !important. Когда вы это сделаете, правило не будет применяться, и строки останутся на своих местах.

/* This prevents cdk drag sorting from shuffling things around */
.piece {
  transform: translate3d(0px, 0px, 0px) !important;
}

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

person Wilt    schedule 05.05.2021