Novice, Paragon, Master

    dragster
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/dragster package

    0.1.3 • Public • Published

    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

    Keywords

    none

    Install

    npm i dragster

    DownloadsWeekly Downloads

    711

    Version

    0.1.3

    License

    MIT

    Last publish

    Collaborators

    • bensmithett