Question

这是一个有很多可能答案的问题，但我正在寻找最好的方法来执行它。

我需要用户完成的动作/动作的历史记录。想象一下，我有一个工作区，用户可以拖动，旋转，调整大小和删除div，如下所示：

<div class="myWorkSpace">
     <div id="GUID1" style="left: 30px; top: 10px;"></div>
     <div id="GUID2" style="left: 20px; top: 20px;"></div>
     <div id="GUID3" style="left: 10px; top: 30px;"></div>
</div>

我为here提供了更多真实代码。

用户拖动一个div并更改div的左侧和顶部位置。如果用户按下名为＆＃34;撤消＆＃34;的按钮，则div返回到原始位置。

我需要做一个动作的历史，但我脑子里有很多可能性，而且我不知道是否存在一些插件或一些例子或正确的方法来做到这一点。

我认为我可以使用一系列动作，并在那里存储更改，但我认为它是非常硬的代码。如果您在小提琴中看到我的真实代码，您将看到我为每个div提供了大量代码和属性，例如，如果用户按下按钮删除div并在撤消后，我将需要恢复所有属性被删除的div（包括guid id）。

有什么建议吗？谢谢！

Answer 1

Maby这是一个想法吗？

来自This Stackoverflow question

var history = {
stack   : [],
counter : -1,
add     : function(item){
    this.stack[++this.counter] = item;
    this.doSomethingWith(item);

    // delete anything forward of the counter
    this.stack.splice(this.counter+1);
},
undo : function(){
    this.doSomethingWith(this.stack[--this.counter]);
},
redo : function(){
    this.doSomethingWith(this.stack[++this.counter]);
},
doSomethingWith : function(item){
    // show item
}};

用户完成的Javascript操作历史记录

1 个答案: