CdkDrag更新位置

Question

我有多个 CdkDrag 元素，它们是从组件中数组上的 ngFor 循环呈现的。当我删除一个元素时，我拼接了数组。然后一些元素将更新那里的位置。我该如何避免这种情况？

我试图在删除其中一个之前获取所有可拖动元素的 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}
}

我希望我的元素在其中一个元素被删除后保留在当前位置。

这是代表问题的 .gif

这里是 stackblitz https://stackblitz.com/edit/angular-p3yfe7

Answer 1

在你的 stackblitz 中进行一些测试后，我能够重现你的预期行为，结果是当 cdkDrag 位于 ng 中时，它会绑定到同一个列表，当你从列表中删除一个 cdkDrag 时，它会呈现模板但是有新的位置来匹配 ngFor 列表顺序，以避免您可以从 cdkDrag.

覆盖 css 样式 position

在您的示例中，只需将 position: absolute; 添加到 .textField css class。

Answer 2

问题是您没有在 *ngFor 中指定 trackBy 函数，这将导致对象在数组更改时重新呈现：

您应该像这样创建 *ngFor：

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

并更新您的组件以获得 trackByField 方法

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

然后已经移动的物品，留在原位，未移动的物品仍然会重新排序

stack

CdkDrag更新位置

CdkDrag updating position

drag-and-drop

typescript

angular-material

angular

angular-cdk