title: HTML 5 drag events: 'dragleave' fired after 'dragenter'
body: <p>I'm using html5 dragevents in a single page application. </p>
  
  <p>Currently, I'm listening to the <code>dragleave</code> and <code>dragenter</code> events to set the proper classes on the elements. </p>
  
  <p>But, when two valid target elements(A and B) are next to each other, and we drag an elment through A into B, the events are fired in the following sequance.</p>
  
  <pre><code>                     +--------------+-------------+
                       |              |             |
  +-------+            |     A        |     B       |
  |       |            |              |             |
  | Elem  +------------------------------------&gt;    |
  |       |            |              |             |
  +-------+            |              |             |
                       +--------------+-------------+
  </code></pre>
  
  <ol>
  <li><code>dragenter</code> of A</li>
  <li><code>dragenter</code> of B</li>
  <li><code>dragleave</code> of A</li>
  </ol>
  
  <p>The expected order of the events would be, </p>
  
  <ol>
  <li><code>dragenter</code> of A</li>
  <li><code>dragleave</code> of A</li>
  <li><code>dragenter</code> of B</li>
  </ol>
  
  <p>I assumed that this would be the order since the item has to leave <code>A</code> before entering <code>B</code>. Am I missing something here? Is there a rationale for the <code>dragenter</code> being fired before the <code>dragleave</code>? Is there a way to change this behaviour? </p>
  
  <p>I have a JSFiddle <a href="https://jsfiddle.net/nipuna777/drp1cgar/12/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The code itself is pretty simple with the <code>dragenter</code> and <code>dragover</code> being listened to.</p>
  
  <pre><code>dragenter: function(e) {
      console.log("basket dragenter");
      // logic here
  },
  dragleave: function(e) {
      console.log("basket dragleave");
      // logic here
  },
  </code></pre>