Как перетащить элемент в другой контейнер?

Question

Я использую cdkDrop из материала, и это мой код :

TS:

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


@Component({
  selector: 'cdk-drag-drop-custom-preview-example',
  templateUrl: 'cdk-drag-drop-custom-preview-example.html',
  styleUrls: ['cdk-drag-drop-custom-preview-example.css'],
})
export class CdkDragDropCustomPreviewExample {

  matrix = [];
  calendar = [{
    "timetableId": 6120329342697,
    "dbVersion": 1497505,
    "timetableWeekId": 6091,
    "classId": 5772436057097,
    "classSubjectId": 5772436057149,
    "subjectId": 5992,
    "teacherId": 25333,
    "weekDay": 1,
    "shift": "1",
    "lessonNumber": 8,
    "classNumber": 1,
    "classSuffix": "a",
    "weeklyHours": 9,
    "selected": true
  },
  {
    "timetableId": 6124624309999,
    "dbVersion": 1497512,
    "timetableWeekId": 6091,
    "classId": 5772436057097,
    "classSubjectId": 5772436057149,
    "subjectId": 5992,
    "teacherId": 25333,
    "weekDay": 1,
    "shift": "1",
    "lessonNumber": 8,
    "classNumber": 1,
    "classSuffix": "a",
    "weeklyHours": 9,
    "selected": false
  }];


  tape = [
    {
      "timetableWeekId": 6091,
      "classId": 5772436057097,
      "classSubjectId": 5772436057149,
      "subjectId": 5992,
      "teacherId": 25333,
      "classNumber": 1,
      "classSuffix": "a",
      "availableHours": 0
    },
    {
      "timetableWeekId": 6091,
      "classId": 5772436057097,
      "classSubjectId": 5772436057150,
      "subjectId": 6073,
      "teacherId": 25550,
      "classNumber": 1,
      "classSuffix": "a",
      "subgroupNumber": 1,
      "availableHours": 0
    },
    {
      "timetableWeekId": 6091,
      "classId": 5772436057097,
      "classSubjectId": 5772436057151,
      "subjectId": 6073,
      "teacherId": 25352,
      "classNumber": 1,
      "classSuffix": "a",
      "subgroupNumber": 2,
      "availableHours": 0
    },
  ];

  constructor() {
    for (var i = 1; i <= 5; i++) {
      this.matrix[i] = [];
      for (var j = 1; j <= 8; j++) {
        this.matrix[i][j] = [];
      }
    }
  }

  getListData(row: number, column: number) {
    return this.calendar.filter((element) => element.lessonNumber == row && element.weekDay == column);
  }

  getCellData(row: number, column: number) {
    return this.matrix[row][column];
  }

  dropTape(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[]>) {
    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);
    }
  }


}

Как видите,Я построил матрицу (таблицу) и заполнил ее данными.Затем я попытался переместить элемент в другую ячейку таблицы.И еще один случай, когда я перемещаю элемент в другой контейнер снаружи.

Оба случая перетаскивания не работают для меня.

Answer 1

Используйте директиву cdk-drop для размещения перетаскиваемого элемента

<h1>Lists</h1>
<section style="display: flex;">
    <section>
        <h4>Movie List One</h4>
        <cdk-drop #listOne [connectedTo]="[listTwo]" class="list-sorted" (dropped)="addToList($event)" [data]="items2">
            <div *ngFor="let item of items2" cdkDrag class="list-sorted__item">
                {{item.title}}
                <img *cdkDragPreview [src]="item.poster" [alt]="item.title">
      </div>

    </cdk-drop>
  </section>
  <section>
    <h4>Movie List Two</h4>
    <cdk-drop #listTwo [connectedTo]="[listOne]" class="list-sorted" (dropped)="addToList($event)" [data]="items3">
      <div *ngFor="let item of items3" cdkDrag class="list-sorted__item">{{item.title}}
         <img  [src]="item.poster" [alt]="item.title">
      </div>
    </cdk-drop>
  </section>
</section>

component.ts

Затем импортируйте класс moveItemInArray из '@ angular / cdk / drag-drop '

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

Forked Пример: https://stackblitz.com/edit/cdk-ng-drag-drop-ccuxev

Ссылка: https://netbasal.com/getting-to-know-the-angular-cdk-drag-and-drop-feature-d79ba462ce31