我有一个 T 恤定制设计软件工具,必须为可拖动的文本添加重做和撤消事件
http://wordpress.tshirtecommerce.com/design-online/?product_id=17 http://wordpress.tshirtecommerce.com/design-online/?product_id=17
我尝试过使用撤消管理器插件http://mattjmattj.github.io/simple-undo/ http://mattjmattj.github.io/simple-undo/
我们到了..
这是一个执行撤消和重做缓冲区并使用函数闭包来处理重做的简单示例。
这当然是一个非常简单的示例,因此希望它也很容易遵循,但没有理由该技术不能用于撤消/重做任何操作。传递给函数闭包的任何内容都可以被捕获,然后进行播放。
var e = {}; //lets store references to the dom elemements
Array.prototype.slice.call(document.querySelectorAll("[id]")).
forEach(function (el) { e[el.id] = el; });
var stack = [],
stackPos = 0,
names = [];
function showNames() {
e.lbNames.textContent = names.join(', ');
e.btUndo.disabled = stackPos <= 0;
e.btRedo.disabled = stackPos >= stack.length;
e.lbBuffer.textContent = stack.length;
}
btAdd.onclick = function () {
if (!ipName.value) return alert("Please enter some text");
//a function closure to capture the name
function add(name) {
return function () {
e.ipName.value = '';
e.ipName.focus();
names.push(name);
stackPos ++;
showNames();
}
}
//no need for closure here, as were just going to pop the
//last one of the names, and shift the undo-pos back
function undo() {
stackPos --;
names.pop();
showNames();
}
//now lets add our do & undo proc
var doadd = add(ipName.value);
stack.splice(stackPos);
stack.push({
do: doadd,
undo: undo
});
//lets now do our inital do
doadd();
};
btUndo.onclick = function () {
var p = stack[stackPos - 1];
p.undo();
};
btRedo.onclick = function () {
var p = stack[stackPos];
p.do();
};
showNames();
<form onsubmit="return false">
name: <input id="ipName">
<br><br>
<button type="submit" id="btAdd" >Add</button>
<button id="btUndo">Undo</button>
<button id="btRedo">Redo</button>
Buffer = <span id="lbBuffer"></span>
<pre id="lbNames"></pre>
</form>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)