HTML 5 drag events

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?

<ul>
    <li draggable="true" class="drag">1111111</li>
    <li draggable="true" class="drag">222222</li>
    <li draggable="true" class="drag">333333</li>
    <li draggable="true" class="drag">444444</li>
</ul>

<script type="text/javascript">
    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');
    }
</script>