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

我有一个这样的物体：

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

此数据填充我的角度项目中的栅格拖放组件

当一个“项目”从一个数组移动到另一个数组时，我希望该数组中的最后一个项目移动到下一个数组，并将所有对象向前推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);
    }
  }

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

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

drop（事件：CdkDragDrop，行名：string）{
if（event.previousContainer==event.container）{
moveItemInArray（event.container.data、event.previousIndex、event.currentIndex）；
}否则{
转让协议(
event.previousContainer.data，
event.container.data，
event.previousIndex，
事件（当前索引）；
}
}

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

---

这里是StackBlitz:

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

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

将“下降功能”更改为后，例如

之后，我们将在拖动项之前添加一个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>

在div中，生成另一个*ngIf是最后一个

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

{{item}}

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

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

将“下降功能”更改为后，例如

之后，我们将在拖动项之前添加一个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>

在div中，生成另一个*ngIf是最后一个

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

{{item}}

您的内部数组是否总是4个元素大？如果从第一个数组中获取一个元素并将其扔到第二个数组中，会发生什么情况？第一个数组是否被3个元素卡住？有空白的吗？向最后一个数组中抛出一个元素怎么样？我们是否在最后得到一个新的1元素数组？最初是的，但我打算尝试将其动态化，以便您可以使用一个变量来设置它，可以是2、4或6，并设置每行上的对象数。我建议您只使用一个数组，而不是对象数组，您将计数器设置为0，然后循环遍历此数组，然后，每次计数器为4时创建一个新行，然后将计数器重置为0。这样你就不需要过滤，你可以在任何地方注入新的项目。我会为Clarity创建一个stackblitz你的内部数组总是4个元素大吗？如果从第一个数组中获取一个元素并将其扔到第二个数组中，会发生什么情况？第一个数组是否被3个元素卡住？有空白的吗？向最后一个数组中抛出一个元素怎么样？我们是否在最后得到一个新的1元素数组？最初是的，但我打算尝试将其动态化，以便您可以使用一个变量来设置它，可以是2、4或6，并设置每行上的对象数。我建议您只使用一个数组，而不是对象数组，您将计数器设置为0，然后循环遍历此数组，然后，每次计数器为4时创建一个新行，然后将计数器重置为0。这样你就不需要过滤，你可以在任何地方注入新的项目。我会为Clarity创建一个stackblitz谢谢Eliseo，这就快到了。我还想过切换位置，而不是向前推所有对象，但不幸的是，当您将鼠标悬停在容器上方放置一个项目时，它会向上移动下一个项目，然后当您放置它时，它会切换。我怎样才能避免这种情况？我更新了答案，我认为它更接近你的要求，这非常接近。我用了“unshift（）”而不是“push（）”，这很有效！非常感谢。我已将此标记为正确，因为它与我想要实现的目标非常接近。但是，如果您有足够的时间，我真的希望使用enter（）和exited（）方法，以便“items”在enter时推送，在exit时删除，以提供更好的效果。不过，感谢您的帮助，非常感谢appreciated@DBoi,考虑到更好的效果，我更新了答案。简单的想法是在每一行之前添加一个固定的元素，当我们在行之间放置时使其可见。真的，我做到了（显示：无）在opossite的情况下谢谢Eliseo，这就快到了。我还想过切换位置，而不是向前推所有对象，但不幸的是，当您将鼠标悬停在容器上方放置一个项目时，它会向上移动下一个项目，然后当您放置它时，它会切换。我怎样才能避免这种情况？我更新了答案，我认为它更接近你的要求，这非常接近。我用了“unshift（）”而不是“push（）”，这很有效！非常感谢。我已将此标记为正确，因为它与我想要实现的目标非常接近。但是，如果您有足够的时间，我真的希望使用enter（）和exited（）方法，以便“items”在enter时推送，在exit时删除，以提供更好的效果。不过，感谢您的帮助，非常感谢appreciated@DBoi,考虑到更好的效果，我更新了答案。简单的想法是在每一行之前添加一个固定的元素，当我们在行之间放置时使其可见。真的，我在opossite的情况下成功了（显示：无）

<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(event: CdkDragDrop<string[]>) {

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

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

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