title: HTML 5 drag events
body: <p>I am trying to build a reorderable list in JS and HTML. (trying to do it without using jQuery ui ) I can't seem to figure out why only the dragstart and dragend events fire when a list item is dragged. Anyone know why the other events not firing?</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li draggable="true" class="drag"&gt;1111111&lt;/li&gt;
      &lt;li draggable="true" class="drag"&gt;222222&lt;/li&gt;
      &lt;li draggable="true" class="drag"&gt;333333&lt;/li&gt;
      &lt;li draggable="true" class="drag"&gt;444444&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
      var drags = document.querySelectorAll('.drag');
      [].forEach.call(drags, function(drag) {
        drag.addEventListener('dragstart', handleDragStart, false);
        drag.addEventListener('dragenter', handleDragEnter, false);
        drag.addEventListener('dragover', handleDragOver, false);
        drag.addEventListener('dragleave', handleDragLeave, false);
        drag.addEventListener('dragend', handleDragEnd, false);
      });
  
      function handleDragStart(e){
          console.log('handleDragStart');
      }
  
      function handleDragEnter(e){
          console.log('handleDragEnter');
      }
  
      function handleDragOver(e){
          console.log('handleDragOver');
      }
  
      function handleDragLeave(e){
          console.log('handleDragLeave');
      }
  
      function handleDragEnd(e){
          console.log('handleDragEnd');
      }
  &lt;/script&gt;
  </code></pre>