部門の追加、編集、削除、ドラッグや並べ替えができる部門の編集インターフェイスをどのように実装する必要がありますか?

レンダリング:

質問:
1. 上の図は、[部門の編集] をクリックした後に表示されるレンダリングです。[部門の編集] をクリックすると、現在のページで部門の追加、部門の編集、部門のドラッグと並べ替えを行うことができます。関数、インターフェースはどう書けばいいのでしょうか？トランザクションを使用する必要がありますか?
2. [キャンセル]をクリックすると、すべての操作を元に戻すことができます。この場合、以前に行った部門の追加、編集、削除、並べ替えなどの操作はどこに保存すればよいでしょうか? 元に戻すときのみ元のデータを取得できます。