Problem with Drag&Drop - Drop does not work with *ngFor loop
Posted: 06 Jun 2016, 16:16
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:
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
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>
Any help is very appreciated