在拖放中获取项目名称

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

我希望每当我拖放一个项目时，我都希望将它的名称保存在一个变量中。就像我拖放 'Episode I - The Phantom Menace' 然后我想将 'Episode I - The Phantom Menace' 存储在一个变量中。我在 event.currentIndex 中有 currentIndex，但我怎样才能得到名称？

Answer 1

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

this.movies[event.currentIndex]

首先创建一个变量
- name: string = "";
在您的 drop 函数中添加以下行
- this.name = this.movies[event.currentIndex]

现在名称将存储在 name 变量中。就像你拖放 'Episode I - The Phantom Menace' 然后 'Episode I - The Phantom Menace' 将存储在 name 变量中。

StackBlitz Code

Answer 2

翻看drop事件，什么都有。

HTML 查看

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

控制器

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

在拖放中获取项目名称

Get item name in drag and drop

angular-material

angular

angular8

angular9

angular-cdk-drag-drop