Primeng 在列表和 table 之间拖放

Question

我正在尝试使用 primeng 的拖放功能将项目从列表转移到 table，反之亦然，这两个元素都应作为拖放源和拖放目标。

使用 PrimeNG-9.0.0 和 Angular9.0.2

我根据 primeng 文档示例进行了如下更改..

 <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>

如果有人使用相同的功能，请提供帮助

Answer 1

我不使用 primeNG 但 angular material 提供拖放模块

访问 drag and drop 查找标题 在列表之间转移项目

我想这对你有帮助

Primeng 在列表和 table 之间拖放

Primeng drag and drop between list and table

drag-and-drop

primeng

angular

angular9