Angular7 Drag & Drop на обернутых элементах, плохо сформированных - PullRequest
Новая
       6

Angular7 Drag & Drop на обернутых элементах, плохо сформированных

0 голосов
/ 01 ноября 2018

Пример кода: 

<div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" class="drop-list mt-1">
  <span cdkDrag class="badge badge-dark" *ngFor="let item of items">item</span>
</div>

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  console.log(this.items);
}

.drop-list {
  overflow: hidden;
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-preview {
  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);
}

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

Я также протестировал этот случай с использованием функций переноса во флексбоксе, но у меня такое же поведение.

Реализация того же случая с помощью ng2-dragula дает правильный и приемлемый результат.

...