Drag and drop does not work correctly when data is changed while dragging

[volser]

What is the expected behavior?

When change data while dragging, for example when have lazy load of items. D&d should update siblings and draggables

What is the current behavior?

current just ignore, cuz copy data before drag
https://github.com/angular/material2/blob/master/src/cdk/drag-drop/directives/drop-list.ts#L322
https://github.com/angular/material2/blob/master/src/cdk/drag-drop/drop-list-ref.ts#L179

[crisbeto]

This would complicate things a lot. What is a use case where it would be useful?

[volser]

use case is lazy loading data while scrolling (it's common enough thing in modern apps)

[volser]

I know we don't have scrolling while dragging feature, but I was trying to implement workaround solution, almost works, but this bug... ((

[djcurfew]

Yeah this is certainly expected in a web app with lots of data loaded, other frameworks have support for it. Would be awesome to get this here!

[theo2354]

This would complicate things a lot. What is a use case where it would be useful?

You simply have to delegate the problem. Give us a way to manually update the components.

[JarekToro]

This is the solution I have found. It has Pros and Cons but i believe it can be improved further.

Listen To Move Event From cdkDrag

          (cdkDragMoved)="moved($event)"

Call $event.source.dropContainer.start();

 moved($event: CdkDragMove<any>) {
      $event.source.dropContainer.start();
  }

How this works.
When you call

 $event.source.dropContainer.start();

It runs this code

    this._siblings.forEach(sibling => sibling._startReceiving(this));

That tells the dynamically added DropList to start listening for cdkDrag Items.

Pros:

• It Works

Cons:

• I don't like it that the $event.source.dropContainer.start(); gets called a lot during the drag
• A few times the cdkDrag component losses reference to its hostElement

[akashkriplani]

I am stuck in the same issue when using the cdkDropList inside an *ngIf whose value changes. The mentioned fix by @JarekToro also does not work for me. Do we have any other solution for this?
I am currently using angular material v7.3.7

[rebendajirijr]

Unfortunately, the @JarekToro workaround does not work for me. Has anybody implemented some other way?

[lecramr]

I have the same problem, @JarekToro solution worked for me, but only 1-2 drags after that the whole drag drop functionality freezes and breaks. Have you found a workaround?

My goal is to have a hidden List on Top that only shows when the user is dragging.

[JarekToro]

For what's it's worth It is still working on my end. But it took a lot of small tinkering with the internals from what I can remember. I just took a peek at the old codebase that needed this. On thing I didn't mention was setting the

CdkDropList.connectedTo array to included the dynamically added list.

[lecramr]

So for anyone having the same problem I found a workaround and improved it further in #15139.

The cdkDropList has now three events:

<div cdkDropList (mousedown)="mousedown()" (mouseup)="mouseup()" (mousemove)="mousemove($event)">

In the controller:

private showDropArea: boolean = false;
private drag: boolean = false;
private startX = 0;
private startY = 0;

mousedown() {
    this.drag = true;
}

mouseup() {
    this.drag = false;
    this.startX = 0;
    this.startY = 0;
    this.showDropArea = false;
}

mousemove(event: any) {
    if (this.drag && !this.showDropArea) {
        if (this.startX == 0 && this.startY == 0) {
            this.startX = event.clientX;
            this.startY = event.clientY;
        }
        else {
            const diffX = Math.abs(event.clientX - this.startX);
            const diffY = Math.abs(event.clientY - this.startY);

            if (diffX > 1 && diffY > 1) {
                this.showDropArea = true;
            }
        }
    }
}

Hope someone finds this useful.

[BenRacicot]

I think I can replicate this but am not 100% sure.

There's two lists, A and B.

1. List A is made up of items from an array and displayed via ngfor
2. A drag item from A is being dragged
3. The data is updated during the drag
4. All D/D functionality becomes frozen

Is this what everyone else is experiencing?

[nshaul]

this code will not work with the ngIf

<div  *ngIf="isDragging" class=""
                          cdkDropList id="newBoxZone" [cdkDropListData]="[]" [cdkDropListConnectedTo]="'newBoxZone'"
                          (cdkDropListDropped)="onDrop($event)">

                          <span>Drop here to create a new box</span>

                      </div>