Angular Material双表格拖拽：点击取消按钮如何重置已拖拽数据？

Got it, let's figure out how to revert all drag-and-drop changes when the Cancel button is clicked. The key here is to save a copy of your original data state upfront, then restore that state when needed. Here's a step-by-step solution tailored to your existing code:

1. Store Original Data Copies #

First, you need to preserve the initial state of your tables before any drag operations happen. Since JavaScript objects/arrays are reference types, we'll use a deep copy to make sure modifying the current data doesn't affect the original.

Add these variables to your component:

// Original state copies for reset
private originalUserSourceList: string[] = [];
private originalCallDeptSourceList: string[] = [];
private originalUserTargetList: string[] = [];
private originalCallDeptTargetList: string[] = [];

Then, in your ngOnInit() (or wherever you load the initial table data), save deep copies of both your source and target arrays:

ngOnInit(): void {
  // Replace these with your actual initial array variables
  this.originalUserSourceList = JSON.parse(JSON.stringify(this.userSourceArray));
  this.originalUserTargetList = JSON.parse(JSON.stringify(this.userTargetArray));
  this.originalCallDeptSourceList = JSON.parse(JSON.stringify(this.callDeptSourceArray));
  this.originalCallDeptTargetList = JSON.parse(JSON.stringify(this.callDeptTargetArray));
}

Note: If your data has complex nested objects, use lodash.cloneDeep() instead of JSON.parse(JSON.stringify()) for more reliable deep copying.

2. Implement the Cancel Reset Logic #

Create a method to revert everything back to the pre-drag state. This will restore both tables and clear your tracking arrays for newly added items:

onCancelDragChanges(): void {
  // Reset user tables to original state
  this.userSourceArray = JSON.parse(JSON.stringify(this.originalUserSourceList));
  this.userTargetArray = JSON.parse(JSON.stringify(this.originalUserTargetList));
  
  // Reset call department tables to original state
  this.callDeptSourceArray = JSON.parse(JSON.stringify(this.originalCallDeptSourceList));
  this.callDeptTargetArray = JSON.parse(JSON.stringify(this.originalCallDeptTargetList));
  
  // Clear the "newly added" tracking arrays
  this.uList_new_add_dataA = [];
  this.callD_new_add_dataA = [];
}

3. Link to Your Cancel Button #

Add the click handler to your template's Cancel button:

<button mat-button color="warn" (click)="onCancelDragChanges()">Cancel</button>

Quick Check for Your Existing Drag Code #

Make sure your CdkDropList containers are bound to the same arrays you're resetting. For example:

<!-- User Source Table Drop Container -->
<div cdkDropList [cdkDropListData]="userSourceArray" (cdkDropListDropped)="dropUser($event)">
  <!-- Your user source table rows here -->
</div>

<!-- User Target Table Drop Container -->
<div cdkDropList [cdkDropListData]="userTargetArray" (cdkDropListDropped)="dropUser($event)">
  <!-- Your user target table rows here -->
</div>

This ensures that when you reset the arrays in onCancelDragChanges(), the tables automatically update to show the original, unmodified data.

内容的提问来源于stack exchange，提问作者Bhavesh Ajani