Блог

Я работаю над угловым приложением. Я использую перетаскивание в своем приложении для изменения порядка списка. Код выглядит следующим образом:

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

компонент:

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

/**
 * @title Dragamp;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);
}
 

Я хочу, чтобы всякий раз, когда я перетаскиваю элемент, я хотел, чтобы его имя было в переменной. Например, если я перетащу «Эпизод I — Призрачная угроза», то я хочу сохранить «Эпизод I — Призрачная угроза» в переменной. У меня есть currentIndex в event.currentIndex, но как я могу получить имя?

Вы можете получить имя с помощью currentIndex. У вас есть currentIndex, просто передайте текущий индекс в массиве фильмов.

this.movies[event.currentIndex]

1. Сначала создайте переменную
   • name: string = "";
2. В вашей функции drop добавьте следующую строку
   • this.name = this.movies[event.currentIndex]

Теперь имя будет сохранено в переменной name. Например, если вы перетащите «Эпизод I — Призрачная угроза», то «Эпизод I — Призрачная угроза» будет сохранен в переменной имени.

Код СтекбЛитца

Просмотрите drop событие, там все есть.

Представление HTML

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

Контроллер

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