Draggabilly
Make that shiz draggable
Rad because it supports IE10+ and multi-touch.
Install
Grab a packaged source file:
- draggabilly.pkgd.min.js minified
- draggabilly.pkgd.js un-minified
Package managers
Install with npm: npm install draggabilly
Install with Bower: bower install draggabilly
CDN
Link directly to Draggabilly files on unpkg.com.
<!-- or -->
Usage
Initialize Draggabilly as a jQuery plugin
var $draggable =
Initialize Draggabilly with vanilla JS
var elem = document;var draggie = elem// options...;// or pass in selector string as first argumentvar draggie = '.draggable'// options...;// if you have multiple .draggable elements// get all draggie elementsvar draggableElems = document;// array of Draggabilliesvar draggies =// init Draggabilliesfor var i=0 len = draggableElemslength; i < len; i++var draggableElem = draggableElemsi;var draggie = draggableElem// options...;draggies;
Classes
.is-pointer-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.
// jQuery{// get Draggabilly instancevar draggie = data'draggabilly';console;}// bind event listener$draggable;// unbind event listener$draggable;// bind event listener to trigger once. note ONE not ON$draggable;
Bind events with vanilla JS with .on()
, .off()
, and .once()
methods. Inside vanilla JS event listeners this
refers to the Draggabilly instance.
// vanilla JS{console;}// bind event listenerdraggie;// unbind event listenerdraggie;// bind event listener to trigger once. note ONCE not ONE or ONdraggie;
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.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmousedown
ortouchstart
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
dragMove
Triggered when dragging moves.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmousemove
ortouchmove
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
moveVector
Type: Object - How far the pointer has moved from its start position{ x: 20, y: -30 }
dragEnd
Triggered when dragging ends.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmouseup
ortouchend
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
pointerDown
Triggered when the user's pointer (mouse, touch, pointer) presses down.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmousedown
ortouchstart
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
pointerMove
Triggered when the user's pointer moves.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmousemove
ortouchmove
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
moveVector
Type: Object - How far the pointer has moved from its start position{ x: 20, y: -30 }
pointerUp
Triggered when the user's pointer unpresses.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmouseup
ortouchend
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
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.
// jQuery$draggable// vanilla JSdraggie
event
- Type: Event - the originalmouseup
ortouchend
eventpointer
- Type: MouseEvent or Touch - the event object that has.pageX
and.pageY
Methods
disable
// jQuery$draggable// vanilla JSdraggie
enable
// jQuery$draggable// vanilla JSdraggie
destroy
// jQuery$draggable// vanilla JSdraggie
jQuery.fn.data('draggabilly')
Get the Draggabilly instance from a jQuery object. Draggabilly instances are useful to access Draggabilly properties.
var draggie = data'draggabilly'// access Draggabilly propertiesconsole
Properties
position
{ x: 20, y: -30 }
x
Integery
Integer
RequireJS
Draggabilly works with RequireJS.
You can require draggabilly.pkgd.js
..
;
To use Draggabilly as a jQuery plugin with RequireJS and draggabilly.pkgd.js, you need to call jQuery Bridget.
// require the require function;
Or, you can manage dependencies with Bower. Set baseUrl
to bower_components
and set a path config for all your application code.
requirejs;;
You can require Bower dependencies and use Isotope as a jQuery plugin with jQuery Bridget.
requirejs;;
Browserify
Draggabilly works with Browserify. Install Draggabilly with npm.
npm install draggabilly
var Draggabilly = ;var draggie = '.draggable'// options;
To use Draggabilly as a jQuery plugin with Browserify, you need to call jQuery Bridget.
npm install jquery-bridget
var $ = ;;var Draggabilly = ;// make Draggabilly a jQuery plugin$;// now you can use $().draggabilly()
Browser support
IE10+, Android 4+, iOS 6+, and all modern browsers
Use Draggabilly v1 for IE8 & 9, and Android 2.3+ support
License
Draggabilly is released under the MIT License. Have at it.