javascript - Javascript 中图像的可拖动克隆

Question

我正在尝试使图像可拖动，但拖动的是图像的克隆(而不是图像本身)。该副本似乎工作正常，但在触发 onmouseup 触发器之前，似乎不会触发 onmousemove 触发器。我不认为事情是这样的。

下面的工作代码

var Draggable = {
  obj : null,
  clone : null,
  lastMessageSent : null,

  init : function(o) {
    o.style.cursor = "move";
    o.onmousedown = function(e) {
      Draggable.obj = this;
      Draggable.start(e);
    };
  },

  start : function(e) {
    e.preventDefault();

    Draggable.obj.style.cursor = "move";
    Draggable.createClone();

    window.onmousemove = function(e) { Draggable.beginDrag(e) };
    window.onmouseup = function(e) { Draggable.endDrag(e) };
  },

  createClone : function() {
    Draggable.clone = Draggable.obj.cloneNode(true);
    Draggable.clone.style.position = "absolute";
    Draggable.clone.style.top = "-800px";
    Draggable.clone.style.left = "-800px";
    Draggable.clone.style.zIndex = "90000";
    Draggable.clone.style.opacity = .35;
    Draggable.clone.id = "dragClone";

    document.body.appendChild(Draggable.clone);
  },

  beginDrag : function(e) {
    var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
    Draggable.clone.style.top = (e.clientY - 40 + scrollTop) + "px";
    Draggable.clone.style.left = (e.clientX - 40) + "px";
  },

  endDrag : function (e) {
    window.onmousemove = window.onmouseup = null;
    Draggable.obj.style.cursor = "normal";
    Draggable.clone.parentNode.removeChild(Draggable.clone);
  },

};


window.onload = function() { Draggable.init(document.getElementById("monkey")) };

Answer 1

您是否尝试过在 documentElement(html 标记)上使用 setCapture？

start : function() 
{    
    Draggable.createClone();
    documentElement.setCapture();
    documentElement.onmousemove = Draggable.beginDrag;
    documentElement.onmouseup = Draggable.endDrag;
},

endDrag : function () 
{
    documentElement.releaseCapture();
    documentElement.onmousemove = null;  
}

这将使所有鼠标事件都被 documentElement 捕获。您不能对文档对象使用 setCapture，尽管事件仍应冒泡到它。查看MSDN documentation用于 setCapture。