web-dev-qa-db-ja.com

CDKドラッグドロップが正しく画像の位置を変更しない

私はイメージギャラリーを作成し、それらの間の位置を変更するつもりです。このために私はドラッグ＆ドロップCDKライブラリを使用しています。

私の問題は、イメージの交換が常に正しく起こるわけではありませんが、最初の画像を2番目のイメージと交換し、この交換は起こらないことです。

このフル機能、水平方向、垂直方向にどのようにしてもらえますか。

画像がMDC-Image-List - Text-Protectionクラスに格納されている場合にのみドラッグを開始できる方法はありますか？

ありがとうございました ！

[〜＃〜]デモ[〜＃〜]

。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

angulartypescriptangular-materialangular-cdkangular-cdk-drag-drop
3
mvp Sets

グリッドのドラッグアンドドロップを許可する唯一の方法は、グリッドの各要素が1つの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;
  }
 _

はい！例を示すようにドロップを使う力はありません。私たちが望む唯一のものが配列を変更することであると思います。

もう一つのことがあるため、「ドラッグプレースホルダーが空のDIVになるようにします。

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

まあ、HTMLは、独自のMDC-image-listが複雑であるため、いくつかの複雑です。すべてのcdkdroplistをdiv ckddroplistグループに囲む必要があることが重要です。

<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>
 _

これが あなたのフォークブリッツ です

注：誰かがより簡単な例を望んでいる場合、これは 別のスタックブリッツ

2
Eliseo