draggable

by Justin Chen

HTML

<script src="http://getfirebug.com/firebug-lite.js"></script>
<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>

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

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

function handleDragEnter(e) {
  console.log('handleDragEnter');
  e.preventDefault();
}

function handleDragOver(e) {
  console.log('handleDragOver');
  e.preventDefault();
}

function handleDragLeave(e) {
  console.log('handleDragLeave');
}

function handleDragEnd(e) {
  console.log('handleDragEnd');
  e.preventDefault();
}