Drag & Drop Events

Hook into dragEnter, dragLeave, and drop events to build custom UI feedback.

(function() {
 var logEl = document.getElementById('event-log');
 function log(msg) {
 var d = document.createElement('div');
 d.className = 'pkg-log-entry';
 d.textContent = new Date().toLocaleTimeString() + ' ' + msg;
 logEl.appendChild(d);
 logEl.scrollTop = logEl.scrollHeight;
 }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 onDragEnter: function() { log('dragEnter'); },
 onDragLeave: function() { log('dragLeave'); },
 onDrop: function(files) { log('drop: ' + (files.length || 'event') + ' item(s)'); }
 });
})();

The drag lifecycle

onDragEnter, onDragLeave and onDrop let you react to the drag itself rather than just its result — highlighting a target, showing a hint, dimming the rest of the page while a file is in flight over it.

dragleave fires more than you expect

Moving between child elements inside the drop zone raises leave events even though the cursor never left the zone, which is why naive highlighting flickers. Counting enters against leaves, or checking the related target, is what makes the state stable — and an unstable highlight is worse than none, because it reads as the page not registering the drag.