Problem with Drag&Drop - Drop does not work with *ngFor loop

[enrico.piccinin]

I have a simple scenario which resembles pretty much the example of drag&drop provided in the primeNg showcase.

I have an array of 'draggableThings' that represents the objects that can be dragged. Such draggableThings appear on the screen in form of a column (on left side of the browser just for sake of details).

I have also an array of 'baskets' where the draggableThings can be dropped. The baskets appear on the screen as a row at the bottom of the screen.

My problem is that if I create the row of baskets with an *ngFor loop, the pDroppable directive seems not to work (i.e. the onDrop event is not called when dropping a droppableThing into one basket).

Here is the html code:

Code: Select all

<div class="ui-grid ui-grid-pad ui-grid-responsive">
    <div id="plan-area" class="ui-grid-row">

      <!-- ************************  -->
      <!--     LEFT SIDEBAR          -->
      <!-- ************************  -->
      <div class="ui-grid-col-1 ui-widget-content">
        <ul style="margin:0;padding:0">
            <li *ngFor="let droppableThing of droppableThings" 
                class="ui-state-default ui-helper-clearfix" pDraggable="droppableThings"
                (onDragStart)="dragStart($event,droppableThing)" (onDragEnd)="dragEnd($event)">
                <dthing [droppableThing]="droppableThing"></dthing>
            </li>
        </ul>
      </div>

      <!-- ************************  -->
      <!--          CHART AREA       -->
      <!-- ************************  -->

      <div id="chart-area" pDroppable="droppableThings" (onDrop)="drop($event)" 
        class="ui-grid-col-9" [class.ui-state-highlight]="draggedThing">
            <div class="planning-timeline" class="ui-grid-row">
                <div class="basket">
                        BasketA
                </div>
                <div class="basket">
                        BasketB
                </div>
                <div *ngFor="let basket of getBaskets(); let i=index" class="basket">
                        basket {{i}}
                </div>
            </div>
      </div>

  </div>
</div>

In this html drag&drop works correctly for BasketA and BasketB but does not work for the baskets created as part of the *ngFor loop. After a bit of investigation it seems to me that the dragover event is not correctly managed by the DOM elements created within the *ngFor loop (while it works perfectly for the DOM elements created outside).

Any help is very appreciated