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>

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>

• javascript
• html
• dom-events

• Find a fiddle here: jsfiddle/68QJu In Chrome on windows it's working (shit lot of handleDragOver o.O) so test it in different browers? – nuala Commented Jul 17, 2012 at 19:53
• I was testing on in Chrome on Snow Leopard. Maybe it's just an issue there. I'll check – jamie holliday Commented Jul 18, 2012 at 12:01
• Yes I've just tested it on Chrome 20 on OS X - jsut start and end events. – nuala Commented Jul 18, 2012 at 14:33

2 Answers 2

As others have mentioned it already works in Chrome. In Firefox you need to set dataTransfer on dragstart and you need to do an e.preventDefault() to make elements valid drop targets. After that everything starts working:

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);
  drag.addEventListener('drop', handleDragEnd, false);
});

function handleDragStart(e) {
  console.log('dragstart ' + e.target.innerText);
  e.dataTransfer.setData('text/plain', 'This text may be dragged')
}

function handleDragEnter(e) {
  console.log('dragenter ' + e.target.innerText);
  e.preventDefault();
}

function handleDragOver(e) {
  console.log('dragover ' + e.target.innerText);
  e.preventDefault();
}

function handleDragLeave(e) {
  console.log('dragleave ' + e.target.innerText);
}

function handleDragEnd(e) {
  console.log('dragend ' + e.target.innerText);
  e.preventDefault();
}

<div draggable="true" class="drag">AAAAAA</div>
<div draggable="true" class="drag">BBBBBB</div>
<div draggable="true" class="drag">CCCCCC</div>
<div draggable="true" class="drag">DDDDDD</div>
<div draggable="true" class="drag">EEEEEE</div>

Note: I also added a drop handler so that Firefox wouldn't try to load a URL when you drop something.

Using IE 10 works fine.

I remend using jQuery UI, it's very, very simple and works in all browsers: http://jqueryui./demos/sortable/