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

Question

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

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

拖动.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>

拖动.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;
      }

    }

当我从无序列表中拖动一个元素并将其放在表格上时，我希望拖动的元素仍保留在无序列表中。现在还没有发生。 最终，除了上述内容之外，在放置事件中，我想用我拖放到表格上的元素的 mapid 填充“mapID”列。

Answer 1

以下代码行正在从无序列表中删除（过滤掉）被拖动的项目：

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

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