CDK Drag Drop не правильно меняет положение изображений - PullRequest
Новая
       6

CDK Drag Drop не правильно меняет положение изображений

1 голос
/ 16 марта 2020

Я создал галерею изображений, и я намерен изменить положение между ними. Для этого я использую библиотеку Drag & Drop cdk.

Моя проблема в том, что обмен изображениями не всегда происходит правильно, иногда я обмениваю первое изображение со вторым, и этот обмен не происходит.

Как я могу сделать это полностью функциональным, по горизонтали и вертикали?

Есть ли способ, с помощью которого Drag можно запустить, только если изображение хранится в списке md c -image-list-with-text- класс защиты?

Спасибо!

DEMO

. HTML

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;" cdkDropList [cdkDropListData]="data"
           (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item" cdkDrag>
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
        <div class="mdc-image-list--with-text-protection">
        <div class="mdc-image-list__supporting mdc-image-list__supporting">
        <span class="mdc-image-list__label">{{product.name}}</span>
        </div>
        </div>
      </li>
    </ng-container>
  </ul>

.ts 

    drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

Images

1 Ответ

2 голосов
/ 16 марта 2020

Единственный способ разрешить перетаскивание в сетке - это, чтобы каждый элемент сетки был одним cdkDropList.

Реклама: элементы не перемещаются во время перетаскивания

Ну, так как данные каждого cdkDropList будут объектом, данными, которые мы хотим транспортировать, и индексом 

[cdkDropListData]="{item:product,index:j}"

Итак, наша функция dropEvent изменяет данные массива в соответствии с этими значениями 

  drop(event: CdkDragDrop<any>) {
    this.data[event.previousContainer.data.index]={...event.container.data.item}
    this.data[event.container.data.index]={...event.previousContainer.data.item}
    event.currentIndex=0;
  }

Да! мы не обязаны использовать падение, как показывают примеры. Подумайте, что единственное, что нам нужно, это изменить массив.

Есть еще одна вещь, которую нужно сделать, сделать так, чтобы "dragPlaceHolder стал пустым div 

<div cdkDrag>
     ....
    <div  *cdkDragPlaceholder></div>
</div>

Ну, html это несколько сложных, потому что собственный md c -image-list является сложным. Важно отметить, что весь cdkDropList должен быть заключен в div ckdDropListGroup 

<div cdkDropListGroup>

    <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
        <ng-container *ngFor="let product of data; let  j = index;">
            <li class="mdc-image-list__item" cdkDropList [cdkDropListData]="{item:product,index:j}"
                cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
                <div cdkDrag>
                    <div class="mdc-image-list__image-aspect-container">
                        <ng-container *ngIf="product.image == null; else productImage">
                            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
                            <ng-template #productImage>
                                <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
                    </div>
                    <div class="mdc-image-list--with-text-protection">
                        <div class="mdc-image-list__supporting mdc-image-list__supporting">
                            <span class="mdc-image-list__label">{{product.name}}</span>
                        </div>
                    </div>
                    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                </div>
            </li>
        </ng-container>
    </ul>
</div>

вот ваш разветвленный стекблиц

ПРИМЕЧАНИЕ. Если кому-то нужен более простой пример, посмотрите этот еще один стек

...