Перетаскивание угловых материалов - создание списка выпусков через сервис DragDrop - PullRequest
Новая
       32

Перетаскивание угловых материалов - создание списка выпусков через сервис DragDrop

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

По какой-то причине я хочу применить функцию Angular Material Drag'n'Drop через сервис DragDrop.

Как написано в документе: https://material.angular.io/cdk/drag-drop/api

DragDrop
Service that allows for drag-and-drop functionality to be attached to DOM elements.

Methods:
createDrag - turns an element into a draggable item
createDropList - turns an element into a drop list.

Мне удалось добавить способность перетаскивания к элементам, но мне не удалось создать функцию Drop List: 

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


@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample implements AfterViewInit {
  @ViewChild('dropListArea', {static: false}) dropListArea: ElementRef;
  @ViewChild('dragable', {static: false}) dragable: ElementRef;
  @ViewChild('dragable2', {static: false}) dragable2: ElementRef;


  constructor(private dragDropService: DragDrop) {}

  ngAfterViewInit() {
    this.dragDropService.createDrag(this.dragable);
    this.dragDropService.createDrag(this.dragable2);
    this.dragDropService.createDropList(this.dropListArea);
  }
}

Вот живой пример: https://stackblitz.com/edit/angular-drtbaa?file=app/cdk-drag-drop-sorting-example.ts

Я буду признателен за любую помощь.

...