7 угловых перетаскивающих элементов - PullRequest
Новая
       32

7 угловых перетаскивающих элементов

0 голосов
/ 19 июня 2019

Я пытаюсь использовать новый Angular 7 CDK Drag and drop, чтобы переместить список элементов.Но не нашел никакой возможности поменять элемент, в основном все примеры приведены для сортировки элементов.

https://stackblitz.com/angular/pxgqrvaqbxeg?file=app%2Fcdk-drag-drop-sorting-example.ts

cdk-drag-drop-sorting-example.htm 

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

cdk-drag-drop-sorting-example.ts 

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

Например: если перетаскивание для элемента 0 инициируется и сбрасывается в элементе 4в этом случае элемент 0 dom следует заменить на элемент 4 и наоборот.

1 Ответ

0 голосов
/ 19 июня 2019

Я не знаю, действительно ли вы проверили документацию по угловым материалам, но вот вам:

Угловые документы (с большим количеством примеров сортировки)

Надеюсь, это помогло;)

...