在拖放中获取项目名称

Question

我正在开发一个 Angular 应用程序。我在我的应用程序中使用拖放来重新排序列表。代码如下：

https://stackblitz.com/edit/angular-drag-drop-sortable?file=app%2Fcdk-drag-drop-sorting-example.html

组件：

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

/**
 * @title Drag&Drop sorting
 */
@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}

html:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

CSS：

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

我希望每当我拖放一个项目时，我都希望将它的名称放在一个变量中。就像如果我拖放“第一集 - 幻影威胁”，那么我想将“第一集 - 幻影威胁”存储在一个变量中。我在 event.currentIndex 中有 currentIndex，但我怎样才能得到名字？

Answer 1

您可以借助 currentIndex 获取名称。你有 currentIndex 只是传递你的电影数组中的当前索引。

this.movies[event.currentIndex]

1. 首先创建一个变量

   • name: string = "";

2. 在您的 drop 函数中添加以下行

   • this.name = this.movies[event.currentIndex]

现在名称将存储在 name 变量中。就像如果您拖放“第一集 - 幻影威胁”，那么“第一集 - 幻影威胁”将存储在 name 变量中。

StackBlitz Code

Answer 2

查看drop事件，一切都在那里。

HTML 视图

<div (cdkDropListDropped)="drop($event)">

控制器

  drop(event: CdkDragDrop<tasks[]>) {
    console.log(event.item.data); // your dropped item
  }