使用可拖动和可调整大小的功能撤消和重做
使用可拖动和可调整大小的功能撤消和重做
提问于 2014-07-31 08:39:16
在编写这个问题之后，我在一个示例中使用一些可以调整大小或可拖动的div来开发两个历史按钮(undo和redo)。
或多或少，它是工作的，但我有一个问题，因为我不知道如何做，按钮撤消或重做不需要按两次由用户。
我存储的星型事件拖放和大小撤消，我存储停止事件的拖动和调整大小为重做。
我有一些想法来解决这个问题，但我不喜欢，其中之一，如果检查div是否有相同的风格，做另一个重做或撤消。
有人能解释一下我怎么才能正确地做到这一点吗？在这里，你有一个充满乐趣的富达
Undo Redo <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();
});回答 1
Stack Overflow用户
发布于 2014-07-31 14:22:00
显然，您的主要问题是每个事件调用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也要这样做
更新Fiddle
Ps:您的redo函数中似乎有一个bug :当我从"undone“位置重新启动时，我遇到了一些问题。但我让你看看这个。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25054379
复制相关文章
相似问题
腾讯云开发者
