Angular Material's Drag and Drop between lists if there's no data model

Question

Update:

I've created a stackblitz to reproduce the problem.

Consider the following static template I have:

<div class="websiteleftColumn" cdkDropList #left="cdkDropList"
  [cdkDropListConnectedTo]="[right]">
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
</div>

<div class="websiteRightColumn" cdkDropList #right="cdkDropList"
  [cdkDropListConnectedTo]="[left]">
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
    <div class="panelWithMuchContent" cdkDrag> much HTML </div>
</div>

I would expect to be able to freely reorder the panels in both columns and also between the two. Instead, I'm able to drag the panels, but as soon as I drop one, nothing happens, it moves back to its original state.

A guess it's because there is no data model behind. In the examples, the draggable divs are rendered on the page by *ngFor from an array. And there's also a drop(event: CdkDragDrop<string[]>) component method bound to them that updates the data model every time a drop happens.

But my problem is that I don't just have so simple list elements that I could put in some array, but entire parts of the website with much HTML code inside that I want to drag.

How could I create a data model for it? (if it's really that Angular's missing)

Can you either possibly display your drop() method and a screenshot, or a stackblitz code :)? — Skdy, Jan 11 '19 at 06:48

tom · Accepted Answer · 2019-01-12T21:41:55.713

See this answer for the reason why it was not working and here's also an example how drag and drop is properly implemented using ng-templates and a data model:

import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'hello',
  template: `

    <div class="row" cdkDropListGroup>

      <div class="col-6" cdkDropList [cdkDropListData]="list1"
        (cdkDropListDropped)="panelDropped($event)">

        <div cdkDrag *ngFor="let p of list1">
          <ng-container *ngTemplateOutlet="this[p+'Panel']">
          </ng-container>
        </div>

      </div>

      <div class="col-6" cdkDropList [cdkDropListData]="list2"
        (cdkDropListDropped)="panelDropped($event)">

        <div cdkDrag *ngFor="let p of list2">
          <ng-container *ngTemplateOutlet="this[p+'Panel']">
          </ng-container>
        </div>

      </div>

    </div>

    <ng-template #aPanel><div class="card"></div></ng-template>
    <ng-template #bPanel><div class="card"></div></ng-template>
    <ng-template #cPanel><div class="card"></div></ng-template>
    <ng-template #dPanel><div class="card"></div></ng-template>
    <ng-template #ePanel><div class="card"></div></ng-template>
    <ng-template #fPanel><div class="card"></div></ng-template>

  `,
  styles: [`

    .col-6:nth-child(1) { background-color: plum; }
    .col-6:nth-child(2) { background-color: peru; }
    .card { background-color: blue; height: 10em; margin: 0.5em; }

  `]
})
export class HelloComponent {
  @Input() name: string;

  @ViewChild('aPanel') aPanel: TemplateRef<any>;
  @ViewChild('bPanel') bPanel: TemplateRef<any>;
  @ViewChild('cPanel') cPanel: TemplateRef<any>;
  @ViewChild('dPanel') dPanel: TemplateRef<any>;
  @ViewChild('ePanel') ePanel: TemplateRef<any>;
  @ViewChild('fPanel') fPanel: TemplateRef<any>;

  list1: Array<string> = ['a', 'b', 'c'];
  list2: Array<string> = ['d', 'e', 'f'];

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

}

score 1 · Answer 2 · answered Jan 10 '19 at 13:57

First to connect all lists you can use the following (I am not sure if this could solve your dragging reset issue):

<div cdkDropListGroup>
  <!-- All lists in here will be connected. -->
  <div cdkDropList *ngFor="let list of lists"></div>
</div>

It should be displayed on the angular components site.

What you are currently creating is static values, and if you have dynamic values that can be generate, then using *ngFor would very likely be preferable.

The content within the droplists will remain the same as that is displayed. So using a *ngFor you create on single template of how you want an element in the list to be displayed. You can therefor have different "templates" in each dropList. Having both droplists connected/linked, will make it possible for you to transfer the content no matter what, but the displayed content would likely remain the same as the template.

I cannot say for sure how you can handle dynamic data that is undefined, but you can probably categorize the type of data you want to handle and create a template for such. Then take advantage of *ngIF and display the data as desired if it is of a certain type.

`cdkDropListGroup` did nothing. Now I'm thinking of extracting the chunks of HTML code that describe each panel into distinct `` blocks, then create an array in the component code with IDs referring to them, and inside the `*ngFor` when I traverse this array, I somehow load the corresponding template block. But I'm quite unsure if that's the right way. Maybe not. — tom, Jan 10 '19 at 14:52
The template usage seems reasonable. But I do not understand why cdkdroplistgroup wouldn't work — Skdy, Jan 11 '19 at 06:49
Meanwhile I found what likely causes [the problem](https://stackoverflow.com/questions/53210886). I use `ngTemplateOutlet` at multiple places that somehow breaks the connection between the lists and the draggable elements. I'm investigating a workaround.. — tom, Jan 11 '19 at 08:18

Angular Material's Drag and Drop between lists if there's no data model

2 Answers2

Linked