Make that shiz draggable
Rad because it supports IE8+ and multi-touch.
Grab a packaged source file:
- draggabilly.pkgd.min.js minified
- draggabilly.pkgd.js un-minified
Install with Bower: bower install draggabilly
Install with npm: npm install draggabilly
Link directly to Draggabilly files on cdnjs.
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"></script><!-- or --><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.js"></script>Initialize Draggabilly as a jQuery plugin
var$draggable=$('.draggable').draggabilly({// options...})Initialize Draggabilly with vanilla JS
varelem=document.querySelector('.draggable');vardraggie=newDraggabilly(elem,{// options...});// or pass in selector string as first argumentvardraggie=newDraggabilly('.draggable',{// options...});// if you have multiple .draggable elements// get all draggie elementsvardraggableElems=document.querySelectorAll('.draggable');// array of Draggabilliesvardraggies=[]// init Draggabilliesfor(vari=0,len=draggableElems.length;i<len;i++){vardraggableElem=draggableElems[i];vardraggie=newDraggabilly(draggableElem,{// options...});draggies.push(draggie);}.is-pointer-downadded when the user's pointer (mouse, touch, pointer) first presses down..is-draggingadded when elements starts to drag.
Type:String
Values:'x' or 'y'
axis: 'x'Constrains movement to horizontal or vertical axis.
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.
Type:Array
Values:[ x, y ]
grid: [20,20]Snaps the element to a grid, every x and y pixels.
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.
Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Inside jQuery event listeners this refers to the Draggabilly element.
// jQueryfunctionlistener(/* parameters */){// get Draggabilly instancevardraggie=$(this).data('draggabilly');console.log('eventName happened',draggie.position.x,draggie.position.y);}// bind event listener$draggable.on('eventName',listener);// unbind event listener$draggable.off('eventName',listener);// bind event listener to trigger once. note ONE not ON$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.
// vanilla JSfunctionlistener(/* parameters */){console.log('eventName happened',this.position.x,this.position.y);}// bind event listenerdraggie.on('eventName',listener);// unbind event listenerdraggie.off('eventName',listener);// bind event listener to trigger once. note ONCE not ONE or ONdraggie.once('eventName',function(){console.log('eventName happened just once');});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.on('dragStart',function(event,pointer){...})// vanilla JSdraggie.on('dragStart',function(event,pointer){...})event- Type:Event - the originalmousedownortouchstarteventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageY
Triggered when dragging moves.
// jQuery$draggable.on('dragMove',function(event,pointer,moveVector){...})// vanilla JSdraggie.on('dragMove',function(event,pointer,moveVector){...})event- Type:Event - the originalmousemoveortouchmoveeventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageYmoveVectorType:Object - How far the pointer has moved from its start position{ x: 20, y: -30 }
Triggered when dragging ends.
// jQuery$draggable.on('dragEnd',function(event,pointer){...})// vanilla JSdraggie.on('dragEnd',function(event,pointer){...})event- Type:Event - the originalmouseuportouchendeventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageY
Triggered when the user's pointer (mouse, touch, pointer) presses down.
// jQuery$draggable.on('pointerDown',function(event,pointer){...})// vanilla JSdraggie.on('pointerDown',function(event,pointer){...})event- Type:Event - the originalmousedownortouchstarteventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageY
Triggered when the user's pointer moves.
// jQuery$draggable.on('pointerMove',function(event,pointer,moveVector){...})// vanilla JSdraggie.on('pointerMove',function(event,pointer,moveVector){...})event- Type:Event - the originalmousemoveortouchmoveeventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageYmoveVectorType:Object - How far the pointer has moved from its start position{ x: 20, y: -30 }
Triggered when the user's pointer unpresses.
// jQuery$draggable.on('pointerUp',function(event,pointer){...})// vanilla JSdraggie.on('pointerUp',function(event,pointer){...})event- Type:Event - the originalmouseuportouchendeventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageY
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.on('staticClick',function(event,pointer){...})// vanilla JSdraggie.on('staticClick',function(event,pointer){...})event- Type:Event - the originalmouseuportouchendeventpointer- Type:MouseEvent or Touch - the event object that has.pageXand.pageY
// jQuery$draggable.draggabilly('disable')// vanilla JSdraggie.disable()// jQuery$draggable.draggabilly('enable')// vanilla JSdraggie.enable()// jQuery$draggable.draggabilly('destroy')// vanilla JSdraggie.destroy()Get the Draggabilly instance from a jQuery object. Draggabilly instances are useful to access Draggabilly properties.
vardraggie=$('.draggable').data('draggabilly')// access Draggabilly propertiesconsole.log('draggie at '+draggie.position.x+', '+draggie.position.y){ x: 20, y: -30 }
xIntegeryInteger
Draggabilly works with RequireJS.
You can require draggabilly.pkgd.js..
requirejs(['path/to/draggabilly.pkgd.js',],function(Draggabilly){newDraggabilly( ... );});To use Draggabilly as a jQuery plugin with RequireJS and draggabilly.pkgd.js, you need to call jQuery Bridget.
// require the require functionrequirejs(['require','jquery','path/to/draggabilly.pkgd.js'],function(require,$,Draggabilly){// require jquery-bridget, it's included in draggabilly.pkgd.jsrequire(['jquery-bridget/jquery.bridget'],function(){// make Draggabilly a jQuery plugin$.bridget('draggabilly',Draggabilly);// now you can use $().draggabilly()$('.draggable').draggabilly({...})});});Or, you can manage dependencies with Bower. Set baseUrl to bower_components and set a path config for all your application code.
requirejs.config({baseUrl: 'bower_components/',paths: {// path your your appapp: '../'}});requirejs(['draggabilly/draggabilly','app/my-component.js'],function(Draggabilly,myComp){newDraggabilly('.draggable',{...});});You can require Bower dependencies and use Isotope as a jQuery plugin with jQuery Bridget.
requirejs.config({baseUrl: '../bower_components',paths: {jquery: 'jquery/jquery'}});requirejs(['jquery','draggabilly/draggabilly','jquery-bridget/jquery.bridget'],function($,Draggabilly){// make Draggabilly a jQuery plugin$.bridget('draggabilly',Draggabilly);// now you can use $().draggabilly()$('.draggable').draggabilly({...})});Draggabilly works with Browserify. Install Draggabilly with npm.
npm install draggabilly
varDraggabilly=require('draggabilly');vardraggie=newDraggabilly('.draggable',{// options});To use Draggabilly as a jQuery plugin with Browserify, you need to call jQuery Bridget.
npm install jquery-bridget
var$=require('jquery');require('jquery-bridget');varDraggabilly=require('draggabilly');// make Draggabilly a jQuery plugin$.bridget('draggabilly',Draggabilly);// now you can use $().draggabilly()$('.draggable').draggabilly({...})Draggabilly is released under the MIT License. Have at it.