zamicol / dragster

Better HTML5 drag events

I'm no longer actively maintaining Dragster. If you'd like to take over, let me know on this issue

Dragster

✨✨Demo✨✨

HTML5 dragenter and dragleave events are crap. Dragster gives you sane new dragster:enter and dragster:leave events that behave just like mouseenter and mouseleave.

Detecting when the user has dragged over a dropzone with child elements sucks. It usually involves transparent overlay elements, listening to the constantly-firing dragover event or nuking every other event with pointer-events: none.

Dragster is tiny (417 bytes minified & gzipped), unobtrusive & doesn't do much - it just add a couple of event listeners for dragenter and dragleave on the elements that you specify. It never does anything automagically, and doesn't cancel the original events.

Dragster works in latest stable Chrome, Firefox, Safari & Opera. It does nothing at all in IE 7-10 (IE doesn't support DOM event constructors).

@catmanjan maintains a jQuery plugin version of Dragster if you'd like better cross browser support.

Setup

Just include Dragster in your app, then bootstrap your dropzone elements with Dragster so they can start emitting dragster: events.

var dropzone = document.getElementById( "my-dropzone" );
new Dragster( dropzone );

Then you can add some plain old event listeners without pulling your hair out.

document.addEventListener( "dragster:enter", function (e) {
  e.target.classList.add( "dragged-over" );
}, false );

document.addEventListener( "dragster:leave", function (e) {
  e.target.classList.remove( "dragged-over" );
}, false );

You can teardown a Dragster instance by calling removeListeners

dragster = new Dragster( dropzone );
// Dragging over dropzone emits dragster: events
dragster.removeListeners();
// Dragster events no longer emitted from dropzone

Contributing

Dragster is written in CoffeeScript.

npm install
npm run build

License

Dragster is released under the MIT License