Skip to content
Better HTML5 drag events
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
src
.gitignore
.npmignore
LICENSE
README.md
package.json

README.md

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

You can’t perform that action at this time.