Draggabilly

Drag me Edit this demo or vanilla JS demo on CodePen

Make that shiz draggable

github.com/desandro/draggabilly

Rad because it supports IE10+ and touch devices.

Draggabilly v2.3.0

Install

Download

Package managers

Install with npm: npm install draggabilly

Install with Bower: bower install draggabilly

CDN

Link directly to draggabilly.pkgd.min.js on unpkg.com.

< script src = "https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js" > </ script >

Usage

Initialize Draggabilly as a jQuery plugin

var $draggable = $( '.draggable' ).draggabilly({ })

Initialize Draggabilly with vanilla JS

var elem = document .querySelector( '.draggable' ); var draggie = new Draggabilly ( elem, { }); var draggie = new Draggabilly ( '.draggable' , { }); var draggableElems = document .querySelectorAll( '.draggable' ); var draggies = [] for ( var i= 0 ; i < draggableElems.length; i++ ) { var draggableElem = draggableElems[i]; var draggie = new Draggabilly ( draggableElem, { }); draggies.push( draggie ); }

Classes

.is-pointer-down added when the user's pointer (mouse, touch, pointer) first presses down.

added when the user's pointer (mouse, touch, pointer) first presses down. .is-dragging added when elements starts to drag.

Options

axis

Type: String

Values: 'x' or 'y'

axis: 'x'

Constrains movement to horizontal or vertical axis.

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.

grid

Type: Array

Values: [ x, y ]

grid: [ 20 , 20 ]

Snaps the element to a grid, every x and y pixels.

handle

Type: Selector String

handle: '.handle'

Specifies on what element the drag interaction starts.

handle is useful for when you do not want all inner elements to be used for dragging, like inputs and forms. See back handle example on CodePen.

Events

Bind events with jQuery with standard jQuery event methods .on() , .off() , and .one() . Inside jQuery event listeners this refers to the Draggabilly element.

function listener ( /* parameters */ ) { var draggie = $( this ).data( 'draggabilly' ); console .log( 'eventName happened' , draggie .position.x, draggie .position.y ); } $draggable.on( 'eventName' , listener ); $draggable.off( 'eventName' , listener ); $draggable.one( 'eventName' , function ( ) { console .log( 'eventName happened just once' ); });

Bind events with vanilla JS with .on() , .off() , and .once() methods. Inside vanilla JS event listeners this refers to the Draggabilly instance.

function listener ( /* parameters */ ) { console .log( 'eventName happened' , this .position.x, this .position.y ); } draggie .on( 'eventName' , listener ); draggie .off( 'eventName' , listener ); draggie .once( 'eventName' , function ( ) { console .log( 'eventName happened just once' ); });

dragStart

Triggered when dragging starts and the element starts moving. Dragging starts after the user's pointer has moved a couple pixels to allow for clicks.

$draggable.on( 'dragStart' , function ( event, pointer ) {...}) draggie .on( 'dragStart' , function ( event, pointer ) {...})

event - Type: Event - the original mousedown or touchstart event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

dragMove

Triggered when dragging moves.

$draggable.on( 'dragMove' , function ( event, pointer, moveVector ) {...}) draggie .on( 'dragMove' , function ( event, pointer, moveVector ) {...})

event - Type: Event - the original mousemove or touchmove event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

- MouseEvent or Touch - the event object that has and moveVector Type: Object - How far the pointer has moved from its start position { x: 20, y: -30 }

Edit demo or vanilla JS demo on CodePen.

dragEnd

Triggered when dragging ends.

$draggable.on( 'dragEnd' , function ( event, pointer ) {...}) draggie .on( 'dragEnd' , function ( event, pointer ) {...})

event - Type: Event - the original mouseup or touchend event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

pointerDown

Triggered when the user's pointer (mouse, touch, pointer) presses down.

$draggable.on( 'pointerDown' , function ( event, pointer ) {...}) draggie .on( 'pointerDown' , function ( event, pointer ) {...})

event - Type: Event - the original mousedown or touchstart event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

pointerMove

Triggered when the user's pointer moves.

$draggable.on( 'pointerMove' , function ( event, pointer, moveVector ) {...}) draggie .on( 'pointerMove' , function ( event, pointer, moveVector ) {...})

event - Type: Event - the original mousemove or touchmove event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

- MouseEvent or Touch - the event object that has and moveVector Type: Object - How far the pointer has moved from its start position { x: 20, y: -30 }

Edit demo or vanilla JS demo on CodePen.

pointerUp

Triggered when the user's pointer unpresses.

$draggable.on( 'pointerUp' , function ( event, pointer ) {...}) draggie .on( 'pointerUp' , function ( event, pointer ) {...})

event - Type: Event - the original mouseup or touchend event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

staticClick

Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.

click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Draggabilly's staticClick event resolves this, as it is triggered when the user has not dragged.

$draggable.on( 'staticClick' , function ( event, pointer ) {...}) draggie .on( 'staticClick' , function ( event, pointer ) {...})

event - Type: Event - the original mouseup or touchend event

- Event - the original or event pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY

Edit demo or vanilla JS demo on CodePen.

Methods

disable

$draggable.draggabilly( 'disable' ) draggie .disable()

enable

$draggable.draggabilly( 'enable' ) draggie .enable()

setPosition

$draggable.draggabilly( 'setPosition' , x, y ) draggie .setPosition( x, y )

x - Type: Number - horizontal position

- Number - horizontal position y - Type: Number - vertical position

destroy

$draggable.draggabilly( 'destroy' ) draggie .destroy()

jQuery.fn.data('draggabilly')

Get the Draggabilly instance from a jQuery object. Draggabilly instances are useful to access Draggabilly properties.

var draggie = $( '.draggable' ).data( 'draggabilly' ) console .log( 'draggie at ' + draggie .position.x + ', ' + draggie .position.y )

Properties

position

draggie .position

position - Type: Object

- Object x - Type: Number

- Number y - Type: Number

Module loaders

Webpack & Browserify

Install Draggabilly with npm.

npm install draggabilly

var Draggabilly = require ( 'draggabilly' ); var draggie = new Draggabilly ( '.draggable' , { });

To use Draggabilly as a jQuery plugin, you need to install and call jQuery Bridget.

npm install jquery-bridget

var $ = require ( 'jquery' ); var jQueryBridget = require ( 'jquery-bridget' ); var Draggabilly = require ( 'draggabilly' ); jQueryBridget( 'draggabilly' , Draggabilly , $ ); $( '.draggable' ).draggabilly({...})

RequireJS

Draggabilly works with RequireJS.

You can require draggabilly.pkgd.js ..

requirejs( [ 'path/to/draggabilly.pkgd.js' , ], function ( Draggabilly ) { new Draggabilly ( '.draggable' , {...}); });

To use Draggabilly as a jQuery plugin with RequireJS and draggabilly.pkgd.js , you need to call jQuery Bridget.

requirejs( [ 'require' , 'jquery' , 'path/to/draggabilly.pkgd.js' ], function ( require, $, Draggabilly ) { require ( [ 'jquery-bridget/jquery-bridget' ], function ( jQueryBridget ) { jQueryBridget( 'draggabilly' , Draggabilly , $ ); $( '.draggable' ).draggabilly({...}) } ); });

Or, you can manage dependencies with a package manager like npm or Bower. Set baseUrl to the package directory and set a path config for all your application code.

requirejs.config({ baseUrl : 'node_modules/' , paths : { app : '../' } }); requirejs( [ 'draggabilly/draggabilly' , 'app/my-component.js' ], function ( Draggabilly, myComp ) { new Draggabilly ( '.draggable' , {...}); });

To use Draggabilly as a jQuery plugin with a package manager, you need install and to call jQuery Bridget.

requirejs.config({ baseUrl : 'node_modules/' , paths : { jquery : 'jquery/dist/jquery' } }); requirejs( [ 'jquery' , 'draggabilly/draggabilly' , 'jquery-bridget/jquery-bridget' ], function ( $, Draggabilly, jQueryBridget ) { jQueryBridget( 'draggabilly' , Draggabilly , $ ); $( '.draggable' ).draggabilly({...}) });

Browser support

Draggabilly v2.2 supports Chrome 36+, Firefox 23+, Safari 9+ (mobile & desktop), IE10+, and Edge 12+.

Use Draggabilly v2.1 for Android 4+ and Safari 6+ support.

Use Draggabilly v1 for IE8 & 9, and Android 2.3+ support.

License

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

Made by David DeSandro 😻