У меня есть таблица и неупорядоченный список в одном контейнере. Я хочу перетащить элемент из моего неупорядоченного списка и поместить его в таблицу. Когда я сделаю это, я хочу сохранить перетаскиваемый элемент в моем неупорядоченном списке. Как сохранить перетаскиваемый элемент в неупорядоченном списке при использовании функции перетаскивания PrimeNg?
Я реализовал функцию перетаскивания с помощью PrimeNg. Типичное перетаскивание не поможет мне, так как при обычном перетаскивании элемент, который вы перетаскиваете, в конечном итоге удаляется из списка, который его содержал. Пример - ваш неупорядоченный список содержит такие данные, как имя, фамилия, DOB, пол и т. Д. Вы перетащили DOB из неупорядоченного списка и удалили его в виде «работника». Теперь этот эффект отбрасывания приводит к удалению DOB из неупорядоченного списка и к добавлению 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 элемента, который я перетаскиваю на таблицу.