如何使用 PrimeNg 拖放保留列表 A 中已从列表 A 拖放到列表 B 中的元素？

Question

我在同一容器中有一个 table 和一个无序列表。我想将元素从我的无序列表中拖放到 table 中。当我这样做时，我仍想将拖动的元素保留在我的无序列表中。使用 PrimeNg 拖放功能时，如何在无序列表中保留被拖动的元素？

我已经使用 PrimeNg 实现了拖放功能。典型的拖放对我没有帮助，因为在典型的拖放中，您拖放并最终放下的项目会从包含它的列表中删除。示例 - 您的无序列表包含名字、姓氏、出生日期、性别等详细信息。您将出生日期从无序列表中拖放 "employee" tabled。现在，这种下降效应导致从无序列表中删除 DOB，并导致在员工 table 中添加 DOB。这是我能做的，但这不是我想要的。我希望 DOB 仍保留在我的无序列表中。

drag.component.html


        <div class="ui-g">
        <div class="ui-g-12 ui-md-6 drop-column" pDroppable="cars" dropEffect="link"
            (onDrop)="drop($event)" [ngClass]="{'ui-highlight-car':draggedCar}" >
            <p-table [value]="availableLeftColumnData">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Total</th>
                        <th>Question</th>
                        <th>MapID</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-car>
                    <tr>

                        <td>{{car.total}}</td>
                        <td>{{car.question}}</td>
                        <td>{{car.mapid}}</td>

                    </tr>
                </ng-template>
            </p-table>
        </div>

        <div class="ui-g-12 ui-md-6 ui-g-nopad drag-column">
            <ul style="margin:0;padding:0;list-style-type:none;cursor:pointer">
                <li *ngFor="let car of availableCars" class="ui-helper-clearfix" pDraggable="cars" dragEffect="link" data-effect-allowed="link"
                    (onDragStart)="dragStart($event,car)" >

                    <div style="margin:8px 0 0 8px;float:left">{{car.mapid}} - {{car.question}}</div>
                </li>
            </ul>
        </div>

    </div>

drag.component.ts


    import { Component, OnInit, NgModule } from '@angular/core';
    import {CarComponent} from '../car/car.component';
    import { CarService } from '../service/CarService';
    import {SharedModule,DataTableModule} from 'primeng/primeng'; 
    //import {TableModule} from 'primeng/table';

    @NgModule({
      imports: [
        SharedModule,
        DataTableModule,
       // TableModule
      ],

    })


    @Component({
      selector: 'app-drag',
      templateUrl: './drag.component.html',
      styleUrls: ['./drag.component.css']
    })
    export class DragComponent implements OnInit {

      availableCars: CarComponent[];

      availableLeftColumnData:CarComponent[];

      selectedCars: CarComponent[];

      draggedCar: CarComponent;

      constructor(private carService: CarService) { }

      ngOnInit() {
          this.selectedCars = [];
          this.carService.getCarsSmall().then(cars => this.availableCars = cars);
          this.carService.getCarsMedium().then(cars=>this.availableLeftColumnData=cars);

      }

      dragStart(event,car: CarComponent) {
          this.draggedCar = car;
          console.log(this.draggedCar);
          console.log(event);
      }

      drop(event) {

          if(this.draggedCar) {
              let draggedCarIndex = this.findIndex(this.draggedCar);
              let draggedCarMapid=this.draggedCar.mapid;
              this.selectedCars = [...this.selectedCars, this.draggedCar];
              this.availableCars = this.availableCars.filter((val,i) => i!=draggedCarIndex);
              this.draggedCar = null;
          }

      }

      dragEnd(event) {
          this.draggedCar = null;
      }

      findIndex(car: CarComponent) {
          let index = -1;
          for(let i = 0; i < this.availableCars.length; i++) {
              if(car.mapid === this.availableCars[i].mapid) {
                  index = i;
                  break;
              }
          }
          console.log(index);
          return index;
      }

    }

当我从无序列表中拖动一个元素并将它放到table上时，我希望被拖动的元素仍然保留在无序列表中。现在还没有发生这种情况。最后除了上面的事情，在 drop 事件中，我想用我拖放到 table.

上的元素的 mapid 填充 "mapID" 列

Answer 1

下面这行代码从无序列表中删除（过滤掉）拖动的项目：

this.availableCars = this.availableCars.filter((val,i) => i!=draggedCarIndex);

如果你想保留列表中的元素，你应该删除这行代码。

如何使用 PrimeNg 拖放保留列表 A 中已从列表 A 拖放到列表 B 中的元素？

How to retain element in list A that has been dragged from list A and dropped into list B using PrimeNg drag and drop?

primeng

angular