用户完成的操作的Javascript历史记录 [英] Javascript history of actions done by user

问题描述

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

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

 < div class =myWorkSpace> 
< div id =GUID1style =left：30px; top：10px;>< / div> 
< div id =GUID2style =left：20px; top：20px;>< / div> 
< div id =GUID3style =left：10px; top：30px;>< / div> 
< / div> 
  

我把这里一个带有更多真实代码的小提琴。

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

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

我想我可以使用一组运动，并在那里存储更改，但我认为这是非常困难的代码。如果你在Fiddle中看到我的真实代码，你会看到我有很多代码和每个div的属性，并且如果用户例如按下delete div按钮并在撤消之后，我需要恢复所有属性删除的div（包括guid id）。

任何建议？谢谢!!

解决方案

马比这是个主意吗？

从这个Stackoverflow问题

  var history = {
 stack：[]，
 counter：-1，
 add：函数（item）{
 this.stack [++ this.counter] = item; 
 this.doSomethingWith（item）; 
 
 //删除计数器前的任何内容
 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）{
 //显示项目
}}; 
  

This is a question that have a lot of possible answers, but I'm looking the best way to perform it.

I need a history of actions/movements done by the user. Imagining that I have a workspace, where the user can drag, rotate, resize and delete divs, something like that:

<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>

I put here a Fiddle with more real code.

The user drag one div and change the left and top position of the div. If the user press a button named "Undo", the div comes back to the original position.

I need to do a history of movements, but I have a lot of possibilities in my mind, and I don't know if exist some plugin or some example or a correct way to do that.

I think I can use an array of movement, and store there the changes, but I think it's very hard-code. If you see my real code in the Fiddle, you will see that I have a lot of code and properties for each div, and if the user for example, press the button delete div and after undo, I would need to restore all the properties of the deleted div (including the guid id).

Any suggestion? Thanks!!

解决方案

Maby this is an idea?

Quote from 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历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！