Javascript中图像的可拖动克隆

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

下面的工作代码

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")) };

---

您是否尝试过在documentElement（html标记）上使用setCapture

---

这将使documentElement捕获所有鼠标事件。您不能在document对象上使用setCapture，尽管事件仍会在文档对象上冒泡。查看setCapture的设置。

编辑：我认为主要问题是您将克隆放在了原始的前面。既然mousedown事件首先触发的是克隆，为什么不试着将克隆放在后面并移动原始的呢

因为我的另一个答案不兼容跨浏览器，我想我应该再试试

不要在图像onmousedown中调用Draggable.start，而是使用文档捕获从图像中冒泡出来的onmousedown，检查事件对象的srceelement属性以确保图像已被单击

下面是一个如何工作的示例，将可拖动图像的class属性设置为包含单词“draggable”：

---

只需确保事件冒泡不会被文档中的任何内容取消。

浏览器默认的拖动操作覆盖了我试图实现的拖动操作

通过对mousedown事件调用preventDefaults（）解决

init : function(o) {
  Draggable.obj = o;
  o.onmousedown = Draggable.start;
},

start : function(e) {
  e.preventDefault();
  Draggable.createClone();
  document.onmousemove = Draggable.beginDrag;
  document.onmouseup = Draggable.endDrag;
},

---

更多信息：

你能解释一下你到底想达到什么目的吗？创建第二个克隆人或只是移动现有的图像？我只是喜欢当人们期望别人能够读懂他们的想法时……他明确地说了他想做的事情。“我试图使图像可拖动，但拖动图像的克隆（而不是图像本身）。”这对我来说很有意义，也许你读错了drozzy。drozzy：当用户单击当前图像开始拖动它时，我试图创建当前图像的克隆。当鼠标移动时，我想拖动新创建的克隆并保留原始图像。setCapture不起作用，因为它不是标准javascript的一部分。不过谢谢你的建议。对不起，我的编码通常仅限于IE。仍然没有爱：（我已经在示例页面上更新了源代码，但它仍然做着几乎相同的事情。我在其中添加了一些firebug调试，它似乎在mousedown和mousemove之后调用startDrag函数一两次，然后停止，直到你再次mouseup和mousedown。非常bizare。我不使用Firefox，但你的代码几乎工作正常。）Chrome中的ks（抛出一些错误）。有关另一个想法，请参阅我的编辑。

document.onmousedown = function ()
{
    if (/Draggable/.test(event.srcElement.className))
    {
        Draggable.obj = event.srcElement;
        Draggable.start;
    }
}

init : function(o) {
  Draggable.obj = o;
  o.onmousedown = Draggable.start;
},

start : function(e) {
  e.preventDefault();
  Draggable.createClone();
  document.onmousemove = Draggable.beginDrag;
  document.onmouseup = Draggable.endDrag;
},