Draggabilly

Make that shiz draggable

draggabilly.desandro.com

Rad because it supports IE8+ and multi-touch.

Install

Grab a packaged source file:

• draggabilly.pkgd.min.js for production
• draggabilly.pkgd.js for development

Or if you're cool with the command line, install with Bower.

bower install draggabilly

Usage

var elem = document.querySelector('#draggable');
var draggie = new Draggabilly( elem, {
  // options...
});

When dragging, Draggabillly will add the class .is-dragging to the element.

Options

containment

Type: Element, Selector String, or Boolean

containment: '#container'

Contains movement to the bounds of the element. If true, the container will be the parent element.

handle

Type: Selector String

handle: '.handle'

Specifies on what element the drag interaction starts.

Events

Draggabilly is an Event Emitter. You can bind event listeners to events.

var draggie = new Draggabilly( elem );

function onDragMove( instance, event, pointer ) {
  console.log( 'dragMove on ' + event.type +
    pointer.pageX + ', ' + pointer.pageY +
    ' position at ' + instance.position.x + ', ' + instance.position.y );
}
// bind event listener
draggie.on( 'dragMove', onDragMove );
// un-bind event listener
draggie.off( 'dragMove', onDragMove );
// return true to trigger an event listener just once
draggie.on( 'dragMove', function() {
  console.log('Draggabilly did move, just once');
  return true;
});

dragStart

.on( 'dragStart', function( draggieInstance, event, pointer ) { //...

• draggieInstance - Type: Draggabilly - the Draggabilly instance
• event - Type: Event - the original mousedown or touchstart event
• pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

dragMove

.on( 'dragMove', function( draggieInstance, event, pointer ) { //...

• draggieInstance - Type: Draggabilly - the Draggabilly instance
• event - Type: Event - the original mousemove or touchmove event
• pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

dragEnd

.on( 'dragEnd', function( draggieInstance, event, pointer ) { //...

• draggieInstance - Type: Draggabilly - the Draggabilly instance
• event - Type: Event - the original mouseup or touchend event
• pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Methods

disable

draggie.disable()

enable

draggie.enable()

License

Draggabilly is released under the MIT License. Have at it.