Перетаскиваемый клон изображения в Javascript

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

Действие по умолчанию в браузерах перекрывало действие по перетаскиванию, которое я пытался реализовать.

Решено с помощью метода protectDefaults () для события mousedown.

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 2

Вы пытались использовать setCapture для documentElement (html tag)?

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

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

Это сделает все события мыши захваченными documentElement. Вы не можете использовать setCapture для объекта документа, хотя события все равно должны всплывать. См. документацию MSDN для setCapture.

Answer 3

РЕДАКТИРОВАТЬ : Я думаю, что главная проблема в том, что вы помещаете клон перед оригиналом. Почему бы не попробовать оставить клона позади и вместо этого переместить оригинал, так как именно это запускает событие mousedown?

Поскольку мой другой ответ не был совместим с несколькими браузерами, я подумал, что мне нужно еще раз.

Вместо вызова Draggable.start в изображении onmousedown, вместо этого используйте документ, чтобы захватить onmousedown, который всплывает из изображения, проверяя свойство srcElement объекта события, чтобы убедиться, что изображение было нажато.

Ниже приведен пример того, как это может работать, установка атрибута класса перетаскиваемого изображения, содержащего слово «Draggable»:

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

Просто убедитесь, что всплывающее окно события не отменяется ничем при его продвижении вверх по документу.