title: Dragging an element inside an anchor in Firefox
body: <p>I'm having issues with some HTML5 Drag-and-drop code on Firefox, when the draggable element is inside an anchor tag.</p>
  
  <p>Boiled down to the minimum reproducible code, here's what I have currently:</p>
  
  <pre><code>&lt;a href="#"&gt;
    &lt;div id="dragger" draggable="true"&gt;&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And the following Javascript:</p>
  
  <pre><code>var d = document.getElementById('dragger');
  
  d.ondragstart = (e) =&gt; {
    console.log('dragstart');
    e.dataTransfer.setData('text', '');
    d.style.backgroundColor = 'green';
  };
  
  d.ondragend = (e) =&gt; {
    console.log('dragend');
    d.style.backgroundColor = '';
  };
  </code></pre>
  
  <p><em>Also here in a <a href="http://output.jsbin.com/fuwuyucuxi" rel="nofollow noreferrer">JSBin</a>.</em></p>
  
  <p>In Chrome, everything works as expected (the handlers are executed), but in Firefox, neither of the handlers run. Instead, I get the default browser behaviour of dragging the <code>&lt;a&gt;</code> tag.</p>
  
  <p><em>Side note: In some places in my application, I've been able to get around this by making the link the draggable element and everything works fine there, but this isn't possible everywhere unfortunately.</em></p>