README
Dragster-avocode-fork
This is a fork of original dragster package from Ben Smithett.
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.
Installation
npm install dragster-avocode-fork
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