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

var elem = document.querySelector('.draggable'); var draggie = new Draggabilly( elem, {   // options... });  // or pass in selector string as first argument var draggie = new Draggabilly( '.draggable', {   // options... });  // if you have multiple .draggable elements // get all draggie elements var draggableElems = document.querySelectorAll('.draggable'); // array of Draggabillies var draggies = [] // init Draggabillies for ( var i=0; i < draggableElems.length; i++ ) {   var draggableElem = draggableElems[i];   var draggie = new Draggabilly( draggableElem, {     // options...   });   draggies.push( draggie ); }

axis: 'x'

containment: '.container'

grid: [ 20, 20 ]

handle: '.handle'

// jQuery function listener(/* parameters */) {   // get Draggabilly instance   var draggie = $(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'); });

// vanilla JS function listener(/* parameters */) {   console.log( 'eventName happened', this.position.x, this.position.y ); } // bind event listener draggie.on( 'eventName', listener ); // unbind event listener draggie.off( 'eventName', listener ); // bind event listener to trigger once. note ONCE not ONE or ON draggie.once( 'eventName', function() {   console.log('eventName happened just once'); });

// jQuery $draggable.on( 'dragStart', function( event, pointer ) {...}) // vanilla JS draggie.on( 'dragStart', function( event, pointer ) {...})

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

// jQuery $draggable.on( 'dragEnd', function( event, pointer ) {...}) // vanilla JS draggie.on( 'dragEnd', function( event, pointer ) {...})

// jQuery $draggable.on( 'pointerDown', function( event, pointer ) {...}) // vanilla JS draggie.on( 'pointerDown', function( event, pointer ) {...})

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

// jQuery $draggable.on( 'pointerUp', function( event, pointer ) {...}) // vanilla JS draggie.on( 'pointerUp', function( event, pointer ) {...})

// jQuery $draggable.on( 'staticClick', function( event, pointer ) {...}) // vanilla JS draggie.on( 'staticClick', function( event, pointer ) {...})

// jQuery $draggable.draggabilly('disable') // vanilla JS draggie.disable()

// jQuery $draggable.draggabilly('enable') // vanilla JS draggie.enable()

// jQuery $draggable.draggabilly( 'setPosition', x, y ) // vanilla JS draggie.setPosition( x, y )

// jQuery $draggable.draggabilly('destroy') // vanilla JS draggie.destroy()

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

draggie.position // => { x: 20, y: -30 }

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

var $ = require('jquery'); var jQueryBridget = require('jquery-bridget'); var Draggabilly = require('draggabilly');  // make Draggabilly a jQuery plugin jQueryBridget( 'draggabilly', Draggabilly, $ ); // now you can use $().draggabilly() $('.draggable').draggabilly({...})

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

// require the require function requirejs( [ 'require', 'jquery', 'path/to/draggabilly.pkgd.js' ],   function( require, $, Draggabilly ) {     // require jquery-bridget, it's included in draggabilly.pkgd.js     require( [ 'jquery-bridget/jquery-bridget' ],     function( jQueryBridget ) {       // make Draggabilly a jQuery plugin       jQueryBridget( 'draggabilly', Draggabilly, $ );       // now you can use $().draggabilly()       $('.draggable').draggabilly({...})     }   ); });

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

requirejs.config({   baseUrl: 'node_modules/',   paths: {     jquery: 'jquery/dist/jquery'   } });  requirejs( [     'jquery',     'draggabilly/draggabilly',     'jquery-bridget/jquery-bridget'   ],   function( $, Draggabilly, jQueryBridget ) {     // make Draggabilly a jQuery plugin     jQueryBridget( 'draggabilly', Draggabilly, $ );     // now you can use $().draggabilly()     $('.draggable').draggabilly({...}) });