Angular Material Drag and Drop - create drop list through DragDrop service

Question

For some reason, I want to apply Angular Material Drag'n'Drop functionality through the DragDrop service.

As it is written in the 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.

I was able to add the drag ability to the elements, but I failed with the creation of a Drop List feature:

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

Here is a live example: https://stackblitz.com/edit/angular-drtbaa?file=app/cdk-drag-drop-sorting-example.ts

I will appreciate any help.

score 3 · Answer 1 · answered Nov 12 '19 at 11:35

The reason why it´s not working is that there is no connection of the draggable items to the droplist. The "create"-method returns a "ref"-object that you can easily connect to each other.

So the solution for your problem is:

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

this works to create a dragable list, but how do you move it into array? where do you put the `drop()` function? the dropped observable is not firing. — chaimm, Apr 20 '21 at 15:31
@chaimm You dont need to call drop(), but instead you have to subscribe ref.dropped — Mizok.H, May 24 '21 at 11:46
you can check this demo https://stackblitz.com/edit/angular-ivy-wdeipo — Mizok.H, May 24 '21 at 11:48

Angular Material Drag and Drop - create drop list through DragDrop service

1 Answers1