title: Is there a defined ordering between dragend and drop events?
body: <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" rel="noreferrer">the documentation</a> on the HTML5 drag and drop API, two events are fired when an element is dropped:</p>
  
  <ol>
  <li>A <code>drop</code> event is fired from the drop target</li>
  <li>A <code>dragend</code> event is fired from the source of the drag</li>
  </ol>
  
  <p>In doing a simple test (see snippet), the <code>drop</code> event always fires just before the <code>dragend</code> event (at least in Chrome) but I can't find anything about the ordering of these events in the spec.</p>
  
  <p>Is the ordering of these events defined, or are they free to fire in either order?</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>function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
  }
  
  function drop(ev) {
      console.log("drop at " + Date.now());
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
  }
  
  function dragend(ev) {
      console.log("dragend at " + Date.now());
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    background-color: red;
    height: 100px;
    width: 100px;
  }
  #drag1 {
    background-color: green;
    height: 50px;
    width: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Drag the green square in to the red one&lt;/div&gt;
  
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" width="100px" height="100px"&gt;&lt;/div&gt;
  
  &lt;div id="drag1" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)" width="50px" height="50px"&gt;</code></pre>
  </div>
  </div>
  </p>