合并多个 div，然后撤消合并

Question

借助 jquery-ui 的可拖放和可拖放功能，我能够拖动 div 并合并它们的内容，但是，客户端也希望具有撤消/取消连接功能。例子：如果有3个div，分别命名为a、b、c，用户将b合并到a，将c合并到(a+b)，然后点击UNDO按钮，用户应该得到c和(a+b) ，如果用户再次单击 UNDO，则 a、b 和 c 应显示为在任何合并发生之前的状态。

我正在尝试用数组来做这件事，以便我可以存储正在合并的内容的不同状态：

var a = new Array(),
    b = new Array(),
    d = new Array(),
    c = new Array(),
    rel = new Array();

有 4 个数组，'b' 保存可拖动 div 中的文本，'a' 保存可拖放 div 的内容，'b' 将合并并在 'c' 中替换，'d' 保存原始来自 'a' 的内容，以便 UNDO 可以发生。 'Rel' 是在撤消功能中使用的关系，通过添加 'var[rel]' 类来引用合并的 div，var 'i' 也用于相同。

HTML：

<div class="document_content">
    <div class="row clause"> ... </div>
    <div class="row clause"> ... </div>
    <div class="row clause"> ... </div>
    <div class="row clause"> ... </div>
    .
    .
    .
</div>

Javascript/jQuery：

$('.row.clause').droppable({
    accept: '.clause',
    drop: function (event, ui) {
    ...//code goes here for successful drop/merge
    }
 });

 $('.row.clause').draggable({
    revert: false,
    start: function (event, ui) {
        ui.helper.data('dropped', false);
    },
    stop: function (event, ui) {
 ...//code goes here for unsuccessful merge
    }
 });

UNDO 按钮有一个计数器，它指示 div 被合并的次数和/或 UNDO 可能发生的次数。

Fiddle link.

对于混乱的代码，我深表歉意，目前还处于开发的早期阶段。

Answer 1

如果我是你，我会考虑使用 javascript 框架，例如 angular 或 ember，您可以在其中优雅地存储对象历史记录，然后简单地遍历所有对象并将它们恢复到之前的位置。

但这并不是真正的要求。

因此，如果您使用纯 html 和 jquery 执行此操作，并且您只需要撤消一个步骤，那么我会考虑将状态存储在元素本身上。在移动的元素上创建一个数据属性（在所有元素上重置此属性），称为 data-previous-container 之类的东西，然后当他们单击撤消时，只需将带有 data-previous-container 的元素移回其先前的容器。这将比在数组中存储状态更容易调试和理解。它还可以处理动态添加更多元素。如果您需要能够撤消多个回合，那么您将需要在每个元素上存储状态历史记录，然后在用户每次单击撤消时按照自己的方式处理每个元素。