how to drag item lists using angular cdkDropList

html:

<table class="normal_table white" nzTemplateMode>
    <thead>
        <tr>
            <th>Category</th>
            <th>Items</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
        <tr cdkDrag #el *ngFor="let category of (categoryList | async); let i = index" class="cursor_default">
            <td data-title="Name">
                <div class="d-flex ai-center gap-3">
                    <div class="move" cdkDragHandle>
                        <span nz-icon nzType="holder" nzTheme="outline"></span>
                    </div>
                    <figure class="_image me-2 pointer" (click)="imageView(category.category_name, category?.category_image)">
                      <img [src]="category?.category_image" [alt]="category?.category_image" onError="this.style.display = 'none';">
                    </figure>
                    <span>{{category.category_name}}</span>
                </div>
            </td>
            <td data-title="Items">
                <span>{{ getCategoryProductCount(category.category_id) }} Items</span>
            </td>
            <td data-title="Action">
                <div class="action">
                      <button
                        type="button"
                        title="Edit"
                        (click)="ViewStock(category.category_id)">
                          <i class="flaticon-show"></i>
                      </button>
                      <button type="button" (click)="selectCategory(category.category_id)" title="Edit">
                          <i class="flaticon-editing"></i>
                      </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

ts:

 drop(event: CdkDragDrop<string[]>) {
    const draggedItem = event.item.data; // Get the dragged item data
    const destinationIndex = event.currentIndex;

    // Now you can use the categoryId as needed

    if (this.categoryList && draggedItem) {
      const categoryId = draggedItem.category_id;

      const newPriority = destinationIndex;

      const body = {
        category_id: categoryId,
        priority: newPriority,
        rid: draggedItem.rid,
        product_version: draggedItem.product_version,
      }

      this.catStore.dispatch(
        InventoryCategoryAction.updateInventoryCategory({
          body: body
        })
      );

      // console.log('categoryId:', draggedItem);

      // // Move the item within the array corresponding to its category
      moveItemInArray(categoryId, event.previousIndex, destinationIndex);
    }
  }

i need to move and drag the table item lists but its not working.

i have a field categoryList api: category.priority

need to update this priority with 1, 2 etc when move item lists