Угловая проблема перетаскивания CDK внутри CSS flexbox - PullRequest
Новая
       35

Угловая проблема перетаскивания CDK внутри CSS flexbox

0 голосов
/ 24 января 2019

Я столкнулся с проблемой при использовании модуля перетаскивания из Angular CDK.Я использую его внутри контейнера div, который имеет (среди прочего) следующие свойства CSS: 

display: flex;
flex-wrap: wrap;

Здесь есть свойство flex_wrap, поэтому, если содержащиеся перетаскиваемые элементы не помещаются в контейнер, онизаверните во вторую строку и так далее.

Поскольку перетаскивание является горизонтальным (cdkDropListOrientation="horizontal"), это прекрасно работает, когда все элементы помещаются в одну строку, но как только они переносятся на вторую строку, перетаскивание становится ошибочным.Я сделал следующий стек для того, чтобы воспроизвести ошибку: https://stackblitz.com/edit/angular-fytgp6.

Если кто-нибудь знает, как решить эту проблему, или подумает об обходном пути, это было бы очень полезно!

1 Ответ

0 голосов
/ 30 января 2019

Это известная проблема с перетаскиванием CDK: https://github.com/angular/material2/issues/13372

По сути, вам нужно иметь родительский div, который определен как «cdkDropListGroup», тогда вы должны рассматривать каждый перетаскиваемый элемент какcdkDropList в дополнение к наличию на нем свойства cdkDrag.Это должно сделать так, чтобы каждый элемент был своим собственным контейнером, и директива cdkDropListGroup соединяет их все вместе.

Затем вы можете иметь * ngFor в контейнере cdkDropList, чтобы порождать по одному для каждого вашего массива.Предметы.Поместите [cdkDropListData] = "index" в cdkDropList, чтобы вы могли перенести текущий перетаскиваемый индекс в cdkDrag.С дочерним элементом cdkDrag вы можете получить этот индекс с помощью [cdkDragData] = "index".Затем установите привязку события (cdkDragEntered) = "enter ($ event)" к дочернему элементу cdkDrag, который будет срабатывать каждый раз, когда вы пытаетесь перетащить элемент в один из новых контейнеров.Внутри введенной функции используйте метод moveItemInArray из CDK для переноса элементов. 

entered(event: CdkDragEnter) {
  moveItemInArray(this.items, event.item.data, event.container.data);
}
<div style="display:flex;flex-wrap:wrap" cdkDropListGroup>
  <div cdkDropList [cdkDropListData]="i" *ngFor="let item of items; let i = index;"  [style.width]="item.width || '100%'">
    <div cdkDrag [cdkDragData]="i" (cdkDragEntered)="entered($event)">
      {{item}}
    </div>
  </div>
</div>

Если это не сработает, вы можете вместо этого использовать mat-grid для управления макетом.

...