title: HTML5 Drag-Drop: SetDragImage not working
body: <p>I'm new to front-end programming and experimenting with HTML5 drag-drop. The object to drag is a bootstrap <code>div.panel</code> which does its job pretty well. However, whilst the object is being dragged, I want to show a custom image using <code>SetDragImage</code> function. I've used this function precisely as described in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29" rel="nofollow">Mozilla Developer Network</a>, but still its not working - the default blank rectangle is shown when the object is dragged.</p>
  
  <p>Below is the JavaScript for the drag/drop events, and here is the <a href="http://jsfiddle.net/93jq19c1/1/" rel="nofollow">JSFiddle</a>.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function drag(ev){
      //var style = window.getComputedStyle(ev.target, null);
      var ss  = (parseInt($(ev.target).position().left,10) - ev.clientX) + ',' + (parseInt($(ev.target).position().top,10) - ev.clientY);
      ev.dataTransfer.setData("text/plain", ss);
  
      ev.dataTransfer.setDragImage(document.getElementById("draggit"), 0, 0);
      console.log("drag:target", $(ev.target).position().left + "," + $(ev.target).position().top);
      console.log("drag:offset", ss);
  }
  
  function drop(ev) {
      //console.log("drop:" +  $(ev.target).position().left + ","  + $(ev.target).position().top);
      //console.log("drop:" +  ev.clientX + ","  + ev.clientY);
      var offset = ev.dataTransfer.getData("text/plain");
      var npos = offset.split(",");
      console.log("drop_clientpos:" +  ev.clientX + "," + ev.clientY);
      console.log("drop_newpos:" +  (ev.clientX + parseInt(npos[0])) + "," + (ev.clientY + parseInt(npos[1])));
      document.getElementById("dragme").style.left = (ev.clientX + parseInt(npos[0])) + "px";
      document.getElementById("dragme").style.top = (ev.clientY + parseInt(npos[1])) + "px";
  
      ev.preventDefault();
      return false;
  }
  
  function dragOver(ev) {
  
      ev.preventDefault();
      return false;
  }
  &lt;/script&gt;
  </code></pre>