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事件，每个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函数似乎有一个错误：当我从“撤消”位置重新启动时，我遇到了一些问题。但我让你看看这个。

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

1 个答案:

Updated Fiddle