My angular app, is not working at the drag-drop-function using primeng libraries, i can drag, but it never drops in the other table

Question

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