角材料拖放-通过DragDrop服务创建下拉列表

Question

出于某种原因，我想通过DragDrop服务应用角材料拖放功能。

它是在doc：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.

我能够将拖动能力添加到元素中，但是创建了一个下拉列表功能失败了：

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

我会感谢你的帮助。

Answer 1

它不起作用的原因是没有可拖动的项目与液滴的连接。"create"-method返回一个"ref"-object，您可以轻松地连接到对方。

所以解决你的问题的方法是：

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

  public ngAfterViewInit() {
    const dragRef1 = this.dragDropService.createDrag(this.dragable);
    const dragRef2 = this.dragDropService.createDrag(this.dragable2);
    const dropListRef = this.dragDropService.createDropList(this.dropListArea);

    dropListRef.withItems([dragRef1, dragRef2]);
  }
}