title: Issue with Drag and Drop API or?
body: <p>I'm encountering an issue with the HTML5 Drag and Drop API.</p>
  <p>Long story short, there are three events other than <code>dragstart</code>, <code>dragover</code>, and <code>drop</code>, which are critical to my objective. Those three events are <code>mousedown</code>, <code>mouseup</code>, and <code>mouseleave</code>.</p>
  <p> </p>
  <h1>onmousedown</h1>
  <p>When the user triggers a <code>mousedown</code> event on a given element, the following function applies attributes and listeners to itself and the target element.</p>
  <pre><code>function doThis() {
    d.setAttribute('draggable', true)
    d.addEventListener('dragstart', dragStart)
    t.style.background = 'black'
    t.addEventListener('dragover', dragOver)
    t.addEventListener('drop', drop)
  }
  </code></pre>
  <p> </p>
  <h1>onmouseup &amp; mouseleave</h1>
  <p>When the user triggers a <code>mouseup</code> or <code>mouseleave</code> event, those attributes and listeners are removed.</p>
  <pre><code>function thenThis(){
    d.setAttribute('draggable', false)
    d.removeEventListener('dragstart', dragStart)
    t.style.background = 'none'
    t.removeEventListener('dragover', dragOver)
    t.removeEventListener('drop', drop)
  }
  </code></pre>
  <p>I've had to add the <code>mouseleave</code> listener since the <code>mouseup</code> event must occur over the element to which it is binded for it to be triggered. Without applying the <code>mouseleave</code> event, the user is able to trigger the <code>mousedown</code> event while avoiding the <code>mouseup</code> event altogether (due to the browser's native detection of the <code>dblclick</code> event) by double clicking the element and then sliding the cursor off of the element while not letting go of the mouse button until it is beyond the element's perimeter.</p>
  <br>
  <h1>The issue...</h1>
  <p>If the user clicks the draggable element too close to its edge, the element becomes undraggable despite the <code>mousedown</code> event being triggered.</p>
  <p><a href="https://codepen.io/tOkyO1/pen/LLremr" rel="nofollow noreferrer">Here is an codepen MVC which can also be viewed below.</a></p>
  <p>Why does this occur? The <code>mousedown</code> even is triggered, but the element is still undraggable...</p>
  <p><strong>Does anybody know how I can fix this or prevent it from happening in the first place?</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var d = document.getElementById('draggable')
  var t = document.getElementById('target')
  
  d.addEventListener('mousedown', doThis)
  d.addEventListener('mouseup', thenThis)
  d.addEventListener('mouseleave', thenThis)
  d.addEventListener('mouseleave', alertLeave)
  
  function doThis(){
    d.setAttribute('draggable', true)
    d.addEventListener('dragstart', dragStart)
    t.style.background = 'black'
    t.addEventListener('dragover', dragOver)
    t.addEventListener('drop', drop)
  }
  
  function thenThis(){
    d.setAttribute('draggable', false)
    d.removeEventListener('dragstart', dragStart)
    t.style.background = 'none'
    t.removeEventListener('dragover', dragOver)
    t.removeEventListener('drop', drop)
  }
  
  function dragStart(e){
    e.dataTransfer.setData('text/plain', e.target.id);
    e.dataTransfer.effectAllowed = 'move';
  }
  
  function dragOver(e){
    e.preventDefault();
  }
  
  function drop(e){
    var data = e.dataTransfer.getData('text/plain');
    e.preventDefault();
    e.target.parentElement.appendChild(document.getElementById(data));
  }
  
  function alertLeave(){
    //alert('mouseleave')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    display: flex;
    justify-content: space-around;
  }
  
  div {
    width: 50px;
    height: 50px;
  }
  
  #draggable {
    background: purple;
  }
  
  #target {
    border: solid 3px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="draggable"&gt;&lt;/div&gt;
  &lt;div id="target"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>