Necessitates Proper Modularity


    1.1.6 • Public • Published


    NPM version Bower version

    Touch enabled implementation of WHATWG drag and drop (aka HTML drag and drop) mechanism.

    How Does It Work?

    new Pan(targetElement);

    This will give targetElement a draggable property and set an event listener for dragstart, drag and dragend; it will also set an event listener for touchstart, touchmove and touchend. These events are re-emitted through the eventEmitter and allow you to animate handle in response to drag/touch events.

    Visual Feedback

    HTML drag and drop spec does not define a method for styling or animating the handle in response to the drag event, e.g. there is no way to control element opacity while dragging.

    The following mechanism is used to get the full control of the visual feedback:

    In the event of dragstart and touchstart:

    1. Make a clone (handle) of the target element.
    2. Take the target element out of the flow (i.e., hide).
    3. Insert the handle element in place of the target element.

    In the event of drag and touchmove:

    1. Make a reference to the handle element available to the event object.

    In the event of dragend and touchend:

    1. Remove the handle element.
    2. Restore the target element.

    As a result, you have full control over the visual feedback.

    There is a reference to the handle element in the Event Object.


    • Access to all of the DOM events for drag and touch.
    • Lightweight and performs good.

    Quick Start

    To make element draggable:

    var targetElement,
    targetElement = document.querySelector('#target-element');
    pan new Pan(targetElement);
    pan.eventEmitter.on('start', function (e) {
    pan.eventEmitter.on('move', function (e) { = 'translate(' + e.offsetX + 'px,' + e.offsetY + 'px)';
    pan.eventEmitter.on('end', function (e) {

    This will make the #target-element element draggable using CSS3 transformations.

    The result of Pan() is an object with a single property (eventEmitter) used to emit events.


    • Basic element dragging using CSS transformations.
    • Events logged in the console.log.

    The code for all of the examples is in the examples folder.

    Raise an issue if you are missing an example.


    You can listen for individual drag and touch DOM events:

    targetElement.addEventListener('dragstart', dragStart);
    targetElement.addEventListener('drag', dragMove);
    targetElement.addEventListener('dragend', dragEnd);
    targetElement.addEventListener('touchstart', dragStart);
    targetElement.addEventListener('touchmove', dragMove);
    targetElement.addEventListener('touchend', dragEnd);

    You can use the eventEmitter object that will normalize drag and touch events to:

    pan.eventEmitter.on('start', dragStart);
    pan.eventEmitter.on('move', dragMove);
    pan.eventEmitter.on('end', dragEnd);

    Event Object

    The listener of the eventEmitter is passed a single eventObject object.

    pan.eventEmitter.on('move', function (eventObject) {
    Name Value
    offsetX Distance from the starting point on X axis.
    offsetY Distance from the starting point on Y axis.
    target Target that received the event.
    handle Element used to represent the target element when dragging.
    type Event name.


    Using Bower:

    bower install pan

    Using NPM:

    npm install pan-drag

    The old-fashioned way, download either of the following files:


    npm i pan

    DownloadsWeekly Downloads






    Last publish


    • avatar