Question

在jquery-ui的draggable和droppable的帮助下，我能够拖动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个阵列，＆＃39; b＆＃39;持有来自可拖动div的文本，＆＃39; a＆＃39;保留了可放弃div的内容，即＆＃39; b＆＃39;将合并并在＆＃39; c＆＃39;和＆＃39; d＆＃39;保留原始内容来自＆＃39; a＆＃39;这样就可以发生UNDO。＆＃39;相对。＆＃39;是撤消功能中使用的关系，通过添加＆＃39; var [rel]＆＃39;来引用合并的div。 class，var＆＃39; i＆＃39;习惯也是如此。

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之类的东西，然后当他们单击undo时，只需将带有data-previous-container的元素移回其先前的容器。与在数组中存储状态相比，这将更容易调试和更容易理解。它还可以处理动态添加更多元素。如果您需要能够撤消多个回合，那么您需要在每个元素上存储状态历史记录，然后在用户每次单击撤消时按照每个元素的方式进行操作。

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

1 个答案: