dra

dragster

Better HTML5 drag events

Showing:

Popularity

Downloads/wk

122

GitHub Stars

99

Maintenance

Last Commit

1yr ago

Contributors

9

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial