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

Question

写入后this question ，我一直在一个示例中开发两个历史记录按钮(撤消和重做)以及一些可以调整大小或可拖动的 div。

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

我正在存储拖动和调整大小的星形事件以进行撤消，并存储拖动和调整大小的停止事件以进行重做。

我心中有一些解决问题的想法，但我不喜欢，其中之一是检查 div 是否具有相同的样式，再进行一次重做或撤消。

谁能解释一下我该如何以正确的方式做到这一点？ Here you have a Fiddle with all the funcionality

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>

CSS

.editable
{
        position: absolute;
        display: inline-block;
}

.workspace
{
    top: 50px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.buttonsMenu
{
    position:absolute;
    padding:20px;
    height: 30px;

}

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();
});

Answer 1

显然，您的主要问题是每个事件调用 history.add() 两次(start + stop)。

一种解决方案是将 start 事件绑定(bind)为每个 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: '' 
    });

 }

对 startHandlerResize 执行相同的操作

Updated Fiddle

Ps:您的 redo 函数中似乎存在错误:我从“撤消”位置重新启动时遇到了一些问题。但我让你看看这个。