DND moved and DND end event not triggered when drag drop

[RagavanRevature]

These events are not triggered even though the drag element has effectallowed as 'all'.Any other constraints for triggering those two events

<div [dndDraggable]="act" [dndType]="act?.type" [dndDisableIf]="act?.isActive" [dndEffectAllowed]="draggable.effectAllowed" (dndMoved)="onDragged()" (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)"></div>

[reppners]

Please provide a small reproduction based on this stackblitz https://stackblitz.com/edit/ngx-drag-drop-issue-template

[dkirsanov]

I had that issue when I was using [dndDraggable] with *ngFor. Make sure you are not removing draggable element from an array before (dndMoved) and (dndEnd) events are triggered.

[jhbsa]

I can confirm a similar issue in the angular 5 framework. As @dkirsanov said, (dndMoved) as well as any other dnd-based events issued by the underlying item of an ngFor loop will not be fired in a dndDropzone with an associated (dndDrop) event. Instead only the zone's (dndDrop) event will be fired. Interestingly, if I remove the (dndDrop) event from the dndDropzone div, the item's (dndMoved, etc.) events will fire as expected (but I obviously lose access to my dndDrop event functionality. So I would surmise that angular stops propagation of the events after the (dndDrop) call ends successfully.

[poddarkhushbu07]

I am also facing the similar issue. I have dndDraggable container inside ngFor element and dndend, dndmoved and dndcopied event are bounded there. But none of them are getting triggered. For now I have handled by manipulated passed required data with dndDraggable and handled with drop event. Any updates on this bug?

[Adi9]

(dndDrag) seems to fire ok on mouse move, and works with (dndEnd). I'm not sure what (dndMove) is. I did split the ngFor loop div from the dndZone div before it worked, not sure if it's related but can be.

[mordvin-denis]

I solved it for me by firing event once again from my drop handler dropEvent.event.target.dispatchEvent(dropEvent.event); I have multiple nested dropzone under ngFor

[reppners]

As @dkirsanov suggested it is crucial to not remove a draggable item from the DOM if you want to react to events emitted from a dragged item. Removal easily happens when the onDrop logic changes the underlying data structure that is used to populate the *ngFor. This may be remedied by trackBy or by changing the logic. E.g. put the removal of an item in the event handlers of the draggable instead of the dropzone onDrop.

[mikenlanggio]

@reppners When I have (dndDrop), even the method does nothing, (dndMoved) doesn't fire anymore like @jhbsa said. Any idea for that?