Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Make that shiz draggable
branch: master

This branch is 64 commits behind desandro:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
.jshintrc
README.md
bower.json
draggabilly.js
index.html

README.md

Draggabilly

Make that shiz draggable

draggabilly.desandro.com

Rad because it supports IE8+ and multi-touch.

Install

Grab a packaged source file:

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.

Something went wrong with that request. Please try again.