title: Draggable Clone of Image in Javascript
body: <p>I am trying to make an image draggable but drag a clone of the image (rather than the image itself).  The copy seems to be working fine but the onmousemove trigger doesn't seem to fire until the onmouseup trigger has fired.  I wouldn't think this is how things worked.</p>
  
  <p><strong>Working Code Below</strong></p>
  
  <pre><code>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")) };
  </code></pre>