I am currently working on transferring items between a list and table using the drag-and-drop feature of PrimeNG. Both elements should be able to act as both drag sources and drop destinations.
My project is based on PrimeNG-9.0.0 and Angular 9.0.2
https://i.stack.imgur.com/pQpoM.png
I made some modifications based on the sample provided in the PrimeNG documentation:
<div class="ui-g">
<div class="ui-g-12 ui-md-6 ui-g-nopad drag-column">
<ul style="margin:0;padding:0">
<li *ngFor="let car of availableCars" class="ui-helper-clearfix" pDraggable="cars" pDroppable="Rcars"
(onDragStart)="dragStart($event,car)" (onDrop)="drop($event)" (onDragEnd)="dragEnd($event)">
<div style="margin:8px 0 0 8px;float:left">{{car.vin}} - {{car.year}}</div>
</li>
</ul>
</div>
<div class="ui-g-12 ui-md-6 drop-column" pDroppable="cars" pDraggable="Rars"
[ngClass]="{'ui-highlight-car':draggedCar}">
<p-table [value]="selectedCars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr (onDragStart)="dragStart($event,car)" (onDrop)="drop($event)"
(onDragEnd)="dragEnd($event)">
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>
</div>If anyone has experience with this particular feature, any help would be greatly appreciated.