How should the department's editing interface be implemented, where departments can be added, edited, deleted, and dragged and sorted?

Rendering:

Question:
1. The picture above is the rendering you see after clicking department editing. When you click department editing, you can add departments, edit departments, delete departments, and drag and sort departments on the current page. To implement such a function, the interface How should I write it? Do you need to use transactions?
2. When you click Cancel, you can undo all operations. In this case, where should I save the operations I performed previously, such as adding, editing, deleting, and sorting departments? Only when undoing can I obtain the original data.