This is my HTML code:
<div>
<h1>Table</h1>
<p>aaaa</p>
</div>
<div class="container">
<div class="table">
<p-table [value]="availableProducts" pDroppable="available" (pDroppableOnDrop)="onDrop($event)">
<ng-template pTemplate="header">
<tr>
<th>int64_field_0</th>
<th>KEY_AB</th>
<th>id_cruce</th>
<th>NUM_REGLA</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr pDraggable="available" (pDragStart)="dragStart($event, product)"(pDragEnd)="dragEnd($event)">
<td>{{product.int64_field_0}}</td>
<td>{{product.KEY_AB }}</td>
<td>{{product.id_cruce}}</td>
<td>{{product.NUM_REGLA }}</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="separator"> </div>
<div class="table">
<p-table [value]="selectedProducts" pDroppable="selected" (pDroppableOnDrop)="onDrop($event)">
<ng-template pTemplate="header">
<tr>
<th>int64_field_0</th>
<th>KEY_AB</th>
<th>id_cruce</th>
<th>NUM_REGLA</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr pDroppable="selected" (pDroppableOnDrop)="onDrop($event)">
<td>{{product.int64_field_0}}</td>
<td>{{product.KEY_AB}}</td>
<td>{{product.id_cruce}}</td>
<td>{{product.NUM_REGLA}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
And This is my TypeScript for events and Drag-Drop utilities:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-drag-drop-table',
templateUrl: './drag-drop-tables.component.html',
styleUrls: ['./drag-drop-tables.component.scss']
})
export class DragDropTablesComponent implements OnInit {
availableProducts: any[] = [];
selectedProducts: any[] = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get<any>('assets/consultadummy.json').subscribe(data => {
this.availableProducts = data;
});
}
dragStart (event: any, product: any)
{
event.dataTransfer.setData ('text', JSON.stringify(product));
}
dragEnd (event: any )
{
}
onDrop(event: any) {
event.preventDefault();
const draggedItem = JSON.parse (event.dataTransfer.getData('text'));
const targetTable = event.target.getAttribute('pDroppable');
if (targetTable === 'available') {
this.availableProducts.push(draggedItem);
const selectedIndex = this.selectedProducts.findIndex(item => item === draggedItem);
if (selectedIndex >= 0) {
this.selectedProducts.splice(selectedIndex, 1);
}
} else if (targetTable === 'selected') {
this.selectedProducts.push(draggedItem);
const availableIndex = this.availableProducts.findIndex(item => item === draggedItem);
if (availableIndex >= 0) {
this.availableProducts.splice(availableIndex, 1);
}
}
}
}
WHY WHEN I GO TO MY APP, DOESN'T WORK?? I CAN ONLY DRAG BUT WHEN I DROP, DOESN´T DROP... JUST DO NOTHING.
I try different ways to make the drag and drop, but it never drops.... it just stay and when is time to drop, nothing happend, so i don't know how to fix this, please help me out with this problem....