title: HTML5 drag and drop setDragImage
body: <p>I am trying to set the drag image of the cursor when dragging an image, however I am not seeing the image when I start to drag, am I doing something wrong?</p>
  
  <pre><code> var dragIcon = document.createElement("img");
   var src = this.$el.find("img").attr("src");
   dragIcon.src = src.replace("http://domain.dev", "");
   dragIcon.width = 100;
   console.log(dragIcon);
   e.originalEvent.dataTransfer.setDragImage(dragIcon, -10, -10);
  </code></pre>
  
  <p><code>this.$el</code> looks like this, </p>
  
  <pre><code>&lt;div class="person-card column" draggable="true" id="95"&gt;
          &lt;img class="person-card-image" src="/profile_pictures/default.png"&gt;
          &lt;div class="card-header-title single"&gt;
              &lt;a href="/people/person/95"&gt;John Doe&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="person-card-subtitle"&gt;
  
                  Linked
  
          &lt;/div&gt;
          &lt;!--&lt;div class="person-card-invite is-sent"&gt;
              &lt;a href="#"&gt;Invite&lt;/a&gt;
          &lt;/div&gt;--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I cannot see any reason why this would not work. However I notice I I look in the dom i do not think the new img is being created.</p>