Javascript 具有可拖动和可调整大小的功能撤消和重做

写完之后，我在一个例子中开发了两个历史按钮（undo和redo），其中包含一些可以调整大小或拖动的div

或多或少，它是工作的，但我有一个问题，因为我不知道如何做，按钮撤消或重做不需要由用户按下两次

我正在存储用于撤销的拖动和调整大小的星形事件，以及用于重做的拖动和调整大小的停止事件

我有一些解决这个问题的想法，但我不喜欢，如果检查div是否具有相同的样式，请执行另一个重做或撤消

谁能给我解释一下我怎样才能正确地做到这一点

HTML

撤消 重做

<div class="workspace">

    <div class="editable" id="panel1" style="width:50px; height:50px; left: 10px; top:10px; background-color: #3498db;"></div>
    <div class="editable" id="panel2" style="width:50px; height:50px; left: 70px; top:10px; background-color: #f1c40f"></div>
    <div class="editable" id="panel3" style="width:50px; height:50px; left: 130px; top:10px; background-color: #16a085;"></div>

</div>

JAVASCRIPT

//History Object
var historyApp = {
    stackStyle   : [],
    stackId   : [],
    counter : -1,
    add     : function(style, id){

        ++this.counter;
        this.stackStyle[this.counter] = style;
        this.stackId[this.counter] = id;
        this.doSomethingWith(style, id);

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

    },
    doSomethingWith : function(style, id){

        //Check if make buttons undo/redo disabled or enabled
        if(this.counter <= -1)
        {
            $('#undo').addClass('disabled');            
            $('#redo').removeClass('disabled'); 
            return;
        }
        else
        {
            $('#undo').removeClass('disabled');            
        }


        if(this.counter == this.stackStyle.length)
        {
            $('#redo').addClass('disabled');
            $('#undo').removeClass('disabled');           
            return;
        }        
        else
        {
            $('#redo').removeClass('disabled');            
        }


        console.log(style + ' - ' + id);
        //Apply history style
        $('#' + id).attr('style', style);     

        console.log(this.counter + ' - ' + this.stackStyle.length);

    }
};


$(document).ready(function (e) {

    //make class .editable draggable
    $('.editable').draggable(
    {
        stop: stopHandlerDrag,
        start: startHandlerDrag

    });

    //make class .editable resizable    
    $('.editable').resizable(
    {
        stop: stopHandlerResize,
        start: startHandlerResize

    });

});

//Stop Handler Drag
function stopHandlerDrag(event, ui)
{
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id');
    historyApp.add(style, id);

}    

//Star Handler Drag
function startHandlerDrag(event, ui)
{
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id');
    historyApp.add(style, id);
}

//Stop Handler Resize
function stopHandlerResize(event, ui)
{
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id');
    historyApp.add(style, id);
}

//Star Handler Resize
function startHandlerResize(event, ui)
{
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id'); 
    historyApp.add(style, id);
}

//Click Events For Redo and Undo
$(document).on('click', '#redo', function () {
    historyApp.redo();
});

$(document).on('click', '#undo', function () {
    historyApp.undo();
});

//历史对象
var historyApp={
堆栈样式：[]，
stackId:[]，
柜台：-1，
添加：功能（样式、id）{
++这个柜台；
this.stackStyle[this.counter]=样式；
this.stackId[this.counter]=id；
这个.doSomethingWith（style，id）；
//删除计数器前面的任何内容
此.stackStyle.splice（此计数器+1）；
},
撤消：函数（）{
--这个柜台；
this.doSomethingWith（this.stackStyle[this.counter]，this.stackId[this.counter]）；
},
重做：函数（）{
++这个柜台；
this.doSomethingWith（this.stackStyle[this.counter]，this.stackId[this.counter]）；
},
doSomethingWith:函数（样式，id）{
//检查是否禁用或启用了“使按钮撤消/重做”
如果（this.counter显然，您的主要问题是每次事件调用
history.add（）
两次（
start
+
stop
）

一种解决方案是将
start
事件绑定到每个ui仅触发一次

function startHandlerDrag(event, ui)
{
    console.log('start drag');
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id');
    historyApp.add(style, id);

    //Dettach all events
    $('#'+id).draggable("option", "revert", false);
    $('#'+id).resizable("destroy");
    //reassign stop events
    $('#'+id).draggable(
    {
        stop: stopHandlerDrag,
        start: ''    
    });
    $('#'+id).resizable(
    {
        stop: stopHandlerResize,
        start: '' 
    });

 }

对
startHandlerSize

Ps：您的
redo
功能中似乎有一个bug：我从“撤消”位置重新启动时遇到了一些问题。但是我让您看看这个

function startHandlerDrag(event, ui)
{
    console.log('start drag');
    var style = $(ui.helper).attr('style');
    var id = $(ui.helper).attr('id');
    historyApp.add(style, id);

    //Dettach all events
    $('#'+id).draggable("option", "revert", false);
    $('#'+id).resizable("destroy");
    //reassign stop events
    $('#'+id).draggable(
    {
        stop: stopHandlerDrag,
        start: ''    
    });
    $('#'+id).resizable(
    {
        stop: stopHandlerResize,
        start: '' 
    });

 }