Question

我正在尝试使图像可拖动但是拖动图像的克隆（而不是图像本身）。副本似乎工作正常但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")) };

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，尽管事件仍应冒泡到它。有关setCapture，请参阅MSDN documentation。

Answer 2

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

通过在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;
},

更多信息：https://developer.mozilla.org/en/DOM/event.preventDefault

Answer 3

编辑：我认为主要的问题是你将克隆放在原版前面。为什么不尝试将克隆放在后面并移动原件，因为这就是mousedown事件首次触发的原因？

由于我的另一个答案不是跨浏览器兼容，我以为我还有其他的答案。

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

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

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

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

Javascript中可拖动的图像克隆

3 个答案: