web-dev-qa-db-ja.com

CdkDrag更新位置

コンポーネントの配列のngForループからレンダリングされる複数のCdkDrag要素があります。 1つの要素を削除すると、配列が接合されます。次に、いくつかの要素がそこで位置を更新します。どうすればそれを回避できますか？

それらの1つを削除する前にすべてのドラッグ可能な要素のfreeDragPositionを取得してから、それらの位置をリセットしようとしましたが、機能しませんでした。

これは私のapp.component.htmlです

<div class="container" id="container">
  <div *ngFor="let f of fields; let i = index;" 
    class="textField"
    [attr.data-guid]="f.guid"  
    (mouseenter)="onFieldHover($event)" 
    cdkDrag 
    cdkDragBoundary="#container"
    (cdkDragEnded)="onDragEnded($event)"
    [cdkDragFreeDragPosition]="f.position">
    <div class="textField-inner">
      <span style="color: hotpink; font-weight: bold">{{f.guid}}</span>
    </div>
    <div class="textField-options">
      <div class="textField-move" cdkDragHandle>
        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </div>
      <div class="textField-remove">
        <i class="fas fa-trash-alt" (click)="onRemoveTextField(i)"></i>
      </div>
    </div>
  </div>
</div>
<button type="button" (click)="onTextFieldAdded()">Add a field</button>

これは私のapp.component.tsです

import { Component } from '@angular/core';
import {CdkDrag, CdkDragEnd} from '@angular/cdk/drag-drop';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  name = 'Angular';
  fields: Field[] = [];
    draggables: CdkDrag<any>[] = [];


  onDragEnded(event: CdkDragEnd){
        if(!this.draggables.find(f => f == event.source)){
            this.draggables.Push(event.source);
        }
    }

  onFieldHover(event: any){
        if(event.target.classList.contains('initialPosition')){
            event.target.classList.remove('initialPosition');
            event.target.style.transform = "translate3d(250px, 180px, 0px)";
        }
    }

  onTextFieldAdded() {
        let field = new Field();
        field.index = this.fields.length;
        field.guid = this.newGuid();

        this.fields.Push(field);
    }

  onRemoveTextField(index: number){
    let positions : any[] =[];

        this.draggables.forEach(drag => {
            let pos = { guid: drag.element.nativeElement.getAttribute("data-guid"), pos: drag.getFreeDragPosition()  };
            positions.Push(pos);
            console.log(pos);
        });

        this.fields.splice(index, 1);

    positions.forEach(p => {
      let newPos = {x: p.pos.x, y: p.pos.y};
      console.log(newPos);
      this.fields.find(f => f.guid == p.guid).position = newPos;
        });
    }

  newGuid(): string{
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
  }

}

export class Field{
    index: number;
    guid: string;
    position: {x: number, y: number}
}

要素の1つが削除されたとき、要素を現在の位置に残したい。

ここに問題を表す.gifがあります element moving has i delete one

これがstackblitzです https://stackblitz.com/edit/angular-p3yfe7

angulartypescriptdrag-and-dropangular-materialangular-cdk
4
Francis Groleau

問題は、*ngForでtrackBy関数を指定しなかったことです。これにより、配列が変更されるたびにオブジェクトが再レンダリングされます。

次のように*ngForを作成する必要があります。

*ngFor="let f of fields; let i = index; trackBy: trackByField"

そして、trackByFieldメソッドを持つようにコンポーネントを更新します

 trackByField = (i: number, field: Field) => field.guid;

その後、すでに移動されたアイテムはその位置に残り、移動されなかったアイテムは引き続き再注文されます

スタック

0
PierreDuc