javascript - 将数组中的最后一个对象推送到下一个数组

Question

我有一个像这样的对象:

container = {
    row1: [ '1', '2', '3', '4' ],
    row2: [ '5', '6', '7', '8' ],
    row3: [ '9', '10', '11', '12' ]
  }

此数据填充我的 Angular 项目中的网格拖放组件。

当一个“项目”从一个数组移动到另一个数组时，我希望该数组中的最后一个项目移动到下一个数组，并将所有对象向前推 1，这样我就可以确保数组中只有 4 个对象每个数组。

我怎样才能实现这个目标？我已经花了太多时间了!

我有一个“drop”方法，当将项目添加/放入新数组时会调用该方法:

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);
    }
  }

所以我现在需要的是:

this.container.data.unshift() //to the next array within the container array.

我还可以在组件中访问此数组，因此甚至可以传递行名称:

drop(event: CdkDragDrop<string[]>, rowName: 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);
    }
  }

我怎样才能做到这一点，如果需要的话能够逆转它也很好。

这是一个 StackBlitz:https://stackblitz.com/edit/angular-cdk-drag-drop-cmyh7k?file=app%2Fcdk-drag-drop-connected-sorting-example.html

Answer 1

首先，您需要更新 stackblitz 的引用以获取新版本的 Angular 8 和 cdk。也删除 pollyfill.ts 中对 core.js 的引用。

这使得您可以在行之间拖动

将“放置功能”更改为，例如

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

    }
  }

您不必使用强制函数“transferArrayItem”。您在 event.previousContainer.data 中拥有来自 event.container.Data 的数据，并且在 event.container.Data 中拥有数据，因此您可以使用 splice “播放”从一个元素中删除另一个元素。

在我的例子中，我使用索引来交换位置，但你可以按照你想要的方式进行

提示:创建 event.previousContainer.data、event.container.data、event.previousIndex 和 event.currentIndex 的 console.log() 来查看值是很有趣的

这里是your forked stackbliz

更新另一个功能

drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      //get the data we are dragging
      const dataFrom=event.previousContainer.data[event.previousIndex]
      //get the last element of the row where dropped
      const dataTo=event.container.data[event.container.data.length-1]

      //remove the element dragged
      event.previousContainer.data.splice(event.previousIndex,1)
      //Add at last the dataTo
      event.previousContainer.data.push(dataTo)

      //Add the data dragged
      event.container.data.splice(event.currentIndex,0,dataFrom)
      //remove the last element
      event.container.data.pop()

    }
  }

Update2看起来有些“陌生”，所以我们可以考虑一下如果使用(cdkDropListEntered)、(cdkDropListExited)和(cdkDragStarted)我们可以提高更好的效果。

这个想法是向每一行添加一个元素，如果我们重新排序该行或者不拖动任何东西，该元素将不可见(显示:无)。如果我们在行之间拖动，此元素将获取我们所放置的行的最后一个元素的值。

噗，先声明三个变量

  fade=[" "," "," "]   //to show the elements
  indexDrag:number=-1  //the row from we picked the element
  indexEnter:number=-1  //the row where we want dropped the element

我们要在拖动项目之前添加一个 div

<div cdkDropList cdkDropListOrientation="horizontal" 
  [cdkDropListData]="container.row1" class="example-list"
  (cdkDropListDropped)="drop($event)" 
  (cdkDropListEntered)="enter($event,0)" > //<--for the second row will be enter($event,1)
                                           // and for the third row enter($event,2)
  <!-- our element before the drags elements -->
  <div class="example-box" 
        [style.display]="(indexDrag!=0 ||
                          indexEnter==indexDrag || 
                          indexEnter<0)?'none':null">
    <div class="tile">
      <div class="tile-container">{{fade[0]}}</div>
    </div>
  </div>
  <!--our dragabbles elements -->
  <div class="example-box" *ngFor="let item of container.row1" cdkDrag 
     (cdkDragStarted)="startDrag(0)"> //<--for the second row will be startDrag(1)
                                      //  and startDrag(2) for the third row
    <div class="tile">
      <div class="tile-container">{{item}}</div>
    </div>
  </div>

然后，只需添加两个函数即可

  startDrag(index) {
    this.indexDrag=index;
  }
  enter(event: CdkDragEnter<any>,index) {
    this.indexEnter=index;
    const data=event.container.data
    this.fade[this.indexDrag]=data[data.length-1]
  }

并且，在 drop 函数中，我们“重新启动”变量indexDrag、indexEnter 和 fade

  drop(event: CdkDragDrop<string[]>) {

    this.indexDrag = -1;
    this.indexEnter = -1;
    this.fade=[" "," "," "]
     ...rest of the code..
  }

结果为new stackblitz

嗯，有一个问题，因为我们可以拖动一行的 las 元素，并且应用程序失败，抱歉。所以我们需要做出另一个改变

在 drop 函数中检查 currentIndex 是否等于 data.length

    const currentIndex=(event.currentIndex==event.container.data.length)?
              event.container.data.length-1:event.currentIndex

在 div 中创建另一个 *ngIf 是最后

    <div class="tile" *ngIf="!last || indexEnter!=1 || indexEnter==indexDrag">
      <div class="tile-container">{{item}}</div>
    </div>