Primeng drag and drop between list and table

Question

I am trying transfer items from list to table and vice verse using drag and drop feature of primeng, both element should act as drag source and drop destinations.

using PrimeNG-9.0.0 and Angular 9.0.2

i did changes as below from the sample of 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>

Kindly help if anyone worked with the same feature

Answer 1

I don't use primeNG but angular material provide drag and drop module

visit drag and drop find title Transferring items between lists

I think it would help you