HTML 5 drag events
19,994
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.
Author by
jamie holliday
I currently work as a front end developer. When not coding I enjoy mountain biking, snowboarding, bodyweight training
Updated on June 16, 2022Comments
-
jamie holliday almost 2 years
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>