How to use Angular's Drag and Drop module to drag an element onto another?

Question

I cannot figure out how to use Angular's Drag and Drop module for something other than move items between lists.

I have a list of items and I want to drag them on individual groups. Incidentally, there are two lists involved here, one list with groups and one list with items.

Here's the template code (please see this https://stackblitz.com/edit/angular-xp4um9 for the full code):

<div class="container">
  <div class="drop-target"> 
    <mat-selection-list 
      cdkDropList
      #dropTarget="cdkDropList"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListData]="groups"
    >
      <mat-list-option *ngFor="let group of groups" [value]="group.id"
      >
        {{ group.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div class="drag-source">
    <mat-selection-list 
      cdkDropList
      [cdkDropListConnectedTo]="[dropTarget]"
    >
      <mat-list-option *ngFor="let item of items" [value]="item.id"
        cdkDrag
        [cdkDragData]="item"
      >
        {{ item.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>
</div>

I want to drag an item from the second list and drop it onto a group in the first list, not as a new element of the second list, as documented everywhere on the internet, but to become part of the group it is dropped onto.

I'd like to be able to get in the drop() function the source item and the destination group.

Also, how can I prevent the first list from shrinking when dragging the item over the second list and also prevent the item appearing below the groups (as in the image below) ?

Thanks.

Eliseo Eliseo · Accepted Answer · 2020-01-11T20:45:28

the most closed I get is this stackblitz

I have three ideas

1.-Make a empty div as cdkDragPlaceholder

<div class="line" *cdkDragPlaceholder></div>

2.-Convert the unique cdkDropList where we can drop in so many cdkDropList as elements we have. For this is necesary use cdkDropListGroup, and add the propertie cdkDropListSortingDisabled="true" to each cdkList. The reason is that else is not clear when we make the drop in which element you are dropped

3.-Have two list for element can be dragger and Use (cdkDragStarted) (cdkDragEnded) to change style.display to none when is dragged

The .html

<div cdkDropListGroup>
    <div class="example-container">
        <h2>To do</h2>

        <div class="example-list" id="todoList">
            <div *ngFor="let item of todo;let i=index"
        cdkDropList cdkDrag
        cdkDropListSortingDisabled="true" 
        [cdkDragDisabled]="true"
                [cdkDropListConnectedTo]="[doneList]" 
                (cdkDropListDropped)="drop($event,i)" class="example-box"
        >{{item}}</div>
        </div>
    </div>

    <div class="example-container">
        <h2>Done</h2>
        <div>
            <div [style.display]="onDrag?'none':''" cdkDropList id="doneList" 
                 [cdkDropListData]="done"
                  class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let item of done" 
           cdkDrag 
          (cdkDragStarted)="onDrag=true"
                    (cdkDragEnded)="onDrag=false">
          {{item}}
                    <div class="line" *cdkDragPlaceholder></div>
                </div>
            </div>
        </div>
        <div class="background" *ngIf="onDrag">
            <div class="example-list">
                <div class="example-box" *ngFor="let item of done">{{item}}
                </div>
            </div>
        </div>
    </div>
</div>

And the drop function as

  drop(event: CdkDragDrop<string[]>,index:number) {
      console.log(event.previousContainer.data[event.previousIndex],
                  '-->',
                  this.todo[index]);
  }

How to use Angular's Drag and Drop module to drag an element onto another?

1 Answers