Question

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

我已经使用PrimeNg实现了拖放功能。典型的拖放操作无济于事，因为在典型的拖放操作中，您拖放并最终拖放的项目将从包含该项目的列表中删除。示例-您的无序列表包含诸如名，姓，DOB，性别等详细信息。您将DOB从无序列表中拖放到表中的“雇员”列表中。现在，这种删除效果导致将DOB从无序列表中删除，并导致在employee表中添加了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;
      }

    }

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

Answer 1

以下代码行从无序列表中删除（筛选出）被拖动的项目：

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

如果要将元素保留在列表中，则应删除此行代码。

如何使用PrimeNg拖放将元素A保留在列表A中并从列表A拖放到列表B中？

1 个答案: