title: How to HTML5-drag an element that has a link in it
body: <p>I have an element that has a link inside it and I want it to be draggable. The element looks like this:</p>
  
  <pre><code>&lt;div draggable="true"&gt;
      &lt;a href="#"&gt;122/1&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The dragging itself works fine, i.e. all expected events are fired. However when the user clicks on the link to drag, the element won't get dragged. In Safari and Chrome I see a grey box with rounded corners that contains the text and the <code>href</code> of the link, so it looks like I am dragging only the link and not the element. See this fiddle: <a href="http://jsfiddle.net/xzroj7ey/4/" rel="nofollow">http://jsfiddle.net/xzroj7ey/4/</a>. When clicking on the link to drag, the <code>div</code> still fires its <code>dragstart</code> event, but it doesn't get dragged.</p>
  
  <p>How can I make the version with the link to be displayed correctly while dragging?</p>