如何使用兼容浏览器的Java撤消和重做事件? [英] How to undo and redo event in Javascript with browser compatible?

问题描述

我拥有T恤定制设计软件工具，必须为可拖动的文本添加重做和撤消事件

I am having a tshirt custom design software tool and have to add the redo and undo event for text which is draggable

http://wordpress.tshirtecommerce.com/design-online/?product_id= 17

我尝试使用撤消管理器插件 http://mattjmattj.github.io/simple-undo/

I have tried with undo manager plugin http://mattjmattj.github.io/simple-undo/

推荐答案

在这里.

这是执行撤消和删除"操作的简单示例.重做缓冲区，并使用函数闭包来处理重做.

This is a simple example of doing an Undo & Redo buffer, and using a function closure to handle the redo..

这当然是一个非常简单的示例，因此希望它也很容易遵循，但是没有理由不能将此技术用于撤消/重做任何事情.无论如何，传递给函数的闭包都可以捕获，然后进行回放.

This is of course a very simple example, so that it is hopefully easy too follow, but there is no reason this technique can't be used to undo/redo anything. Anything, you pass to a function closure can be captured, and then made to play back.

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>

这篇关于如何使用兼容浏览器的Java撤消和重做事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！