angular integrates CDK drag drop to implement drag function
app.modules.ts import

import { DragDropModule } from '@angular/cdk/drag-drop';
imports: [
	DragDropModule
]

1, Drag and drop sorting in table

<nz-table [nzData]="sourceData" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ y: '500px' }">
     <thead>
     <tr>
         <th>Process description</th>
         <th>Standard working hours(Minute)</th>
         <th>Process level</th>
     </tr>
     </thead>
     <tbody cdkDropList
            (cdkDropListDropped)="drop($event)">
     <tr *ngFor="let data of sourceData" cdkDrag>
         <td>{{ data.desc }}</td>
         <td>{{ data.sam }}</td>
         <td>{{ data.grade }}</td>
     </tr>
     </tbody>
 </nz-table>

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop';
sourceData = [{
  'id': 1,
    'desc ': 'string',
    'sam': 1,
    'grade': 1,
    'price': 0
}, {
    'id': 2,
    'desc ': 'string',
    'sam': 2,
    'grade': 2,
    'price': 21
}, {
    'id': 3,
    'desc ': 'string',
    'sam': 3,
    'grade': 3,
    'price': 3
}];
	drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }

2, Drag between tables

1. Unlimited drag between tables

<nz-table [nzData]="targetData" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ y: '500px' }">
     <thead>
     <tr>
         <th nzWidth="60px">Serial number</th>
         <th nzWidth="160px">Process description</th>
         <th nzWidth="110px">Standard working hours(Minute)</th>
         <th nzWidth="110px">Process level</th>
         <th nzWidth="110px">Standard labor price(element)</th>
         <th nzWidth="90px" *ngIf="editable">operation</th>
     </tr>
     </thead>
     <tbody cdkDropList
            #todoList="cdkDropList"
            [cdkDropListData]="targetData"
            [cdkDropListConnectedTo]="[doneList]"
            (cdkDropListDropped)="drop($event)">
         <tr *ngFor="let data of targetData; index as i" cdkDrag>
             <td>{{ i+1 }}</td>
             <td>{{ data.desc }}</td>
             <td>{{ data.sam }}</td>
             <td>{{ data.grade }}</td>
             <td>{{ data.price }}</td>
             <td *ngIf="editable">
                 <button nz-button nzType="link" (click.stop)="delete(i)">delete</button>
             </td>
         </tr>
     </tbody>
 </nz-table>
 <nz-table [nzData]="sourceData" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ y: '500px' }">
      <thead>
      <tr>
          <th>Process description</th>
          <th>Standard working hours(Minute)</th>
          <th>Process level</th>
      </tr>
      </thead>
      <tbody cdkDropList
             #doneList="cdkDropList"
             [cdkDropListData]="sourceData"
             [cdkDropListConnectedTo]="[todoList]"
             (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let data of sourceData" cdkDrag>
          <td>{{ data.desc }}</td>
          <td>{{ data.sam }}</td>
          <td>{{ data.grade }}</td>
      </tr>
      </tbody>
  </nz-table>

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop';
targetData = [{
    'id': null,
    'desc': null,
    'sam': null,
    'grade': null,
    'price': null
}];
sourceData = [{
  'id': 1,
    'desc ': 'string',
    'sam': 1,
    'grade': 1,
    'price': 0
}, {
    'id': 2,
    'desc ': 'string',
    'sam': 2,
    'grade': 2,
    'price': 21
}, {
    'id': 3,
    'desc ': 'string',
    'sam': 3,
    'grade': 3,
    'price': 3
}];
drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
        	// Data conversion between tables, function: drag and drop the data of the source table to the target table, and delete it from the source table
            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            // Data replication between tables, function: copy the data of the source table to the target table by dragging, and do not delete it in the source table
            // copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            /**
             * There must be at least one piece of data in the target table. Solution 1: delete the empty data when there is an initial piece of empty data
             */
            this.targetData.forEach((item) => {
                if (item.id === null) {
                    this.targetData.splice(this.targetData.indexOf(item), 1);
                }
            });
        }
    }
    // delete
    delete(index) {
        /**
         * At least one piece of data must exist in the target table. Solution 1: when the last piece of data is deleted, an empty piece of data is added
         */
        this.targetData.splice(index, 1);
        if (this.targetData.length === 0) {
            const data = {
                id: null,
                desc: null,
                sam: null,
                grade: null,
                price: null
            };
            this.targetData.splice(0, 0, data);
        }
    }

Note:
There must be at least one piece of data in the target table. If it is empty, inter table dragging cannot be performed, and its dragging will be considered as intra table dragging

2. There are restrictions on dragging between tables. The source table can only be dragged out

<nz-table [nzData]="targetData" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ y: '500px' }">
     <thead>
     <tr>
         <th nzWidth="60px">Serial number</th>
         <th nzWidth="160px">Process description</th>
         <th nzWidth="110px">Standard working hours(Minute)</th>
         <th nzWidth="110px">Process level</th>
         <th nzWidth="110px">Standard labor price(element)</th>
         <th nzWidth="90px" *ngIf="editable">operation</th>
     </tr>
     </thead>
     <tbody cdkDropList
            #todoList="cdkDropList"
            [cdkDropListData]="targetData"
            [cdkDropListConnectedTo]="[doneList]"
            (cdkDropListDropped)="drop($event)">
         <tr *ngFor="let data of targetData; index as i" cdkDrag>
             <td>{{ i+1 }}</td>
             <td>{{ data.desc }}</td>
             <td>{{ data.sam }}</td>
             <td>{{ data.grade }}</td>
             <td>{{ data.price }}</td>
             <td *ngIf="editable">
                 <button nz-button nzType="link" (click.stop)="delete(i)">delete</button>
             </td>
         </tr>
     </tbody>
 </nz-table>
 <nz-table [nzData]="sourceData" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ y: '500px' }">
      <thead>
      <tr>
          <th>Process description</th>
          <th>Standard working hours(Minute)</th>
          <th>Process level</th>
      </tr>
      </thead>
      <tbody cdkDropList
             #doneList="cdkDropList"
             [cdkDropListData]="sourceData"
             [cdkDropListEnterPredicate]="noReturnPredicate"
             [cdkDropListConnectedTo]="[todoList]"
             (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let data of sourceData" cdkDrag>
          <td>{{ data.desc }}</td>
          <td>{{ data.sam }}</td>
          <td>{{ data.grade }}</td>
      </tr>
      </tbody>
  </nz-table>

import {moveItemInArray, transferArrayItem, copyArrayItem, CdkDragDrop} from '@angular/cdk/drag-drop';
targetData = [{
    'id': null,
    'desc': null,
    'sam': null,
    'grade': null,
    'price': null
}];
sourceData = [{
  'id': 1,
    'desc ': 'string',
    'sam': 1,
    'grade': 1,
    'price': 0
}, {
    'id': 2,
    'desc ': 'string',
    'sam': 2,
    'grade': 2,
    'price': 21
}, {
    'id': 3,
    'desc ': 'string',
    'sam': 3,
    'grade': 3,
    'price': 3
}];
drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
        	// Data conversion between tables, function: drag and drop the data of the source table to the target table, and delete it from the source table
            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            // Data replication between tables, function: copy the data of the source table to the target table by dragging, and do not delete it in the source table
            // copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            /**
             * There must be at least one piece of data in the target table. Solution 1: delete the empty data when there is an initial piece of empty data
             */
            this.targetData.forEach((item) => {
                if (item.id === null) {
                    this.targetData.splice(this.targetData.indexOf(item), 1);
                }
            });
        }
    }
    // delete
    delete(index) {
        /**
         * At least one piece of data must exist in the target table. Solution 1: when the last piece of data is deleted, an empty piece of data is added
         */
        this.targetData.splice(index, 1);
        if (this.targetData.length === 0) {
            const data = {
                id: null,
                desc: null,
                sam: null,
                grade: null,
                price: null
            };
            this.targetData.splice(0, 0, data);
        }
    }
    // Don't let the data in other list s move into this
    noReturnPredicate() {
        return false;
    }

Note: set the entry limit through cdkDropListEnterPredicate

For details, please refer to the official website: https://material.angular.io/cdk/drag-drop/examples