Draggabilly Works with jQuery and RequireJS

Webpack & Browserify

Install Draggabilly with npm.

npm install draggabilly

var Draggabilly = require('draggabilly');

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

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');

// make Draggabilly a jQuery plugin
jQueryBridget( 'draggabilly', Draggabilly, $ );
// now you can use $().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.

// 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({...})
    }
  );
});

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: {
    // path your your app
    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 ) {
    // make Draggabilly a jQuery plugin
    jQueryBridget( 'draggabilly', Draggabilly, $ );
    // now you can use $().draggabilly()
    $('.draggable').draggabilly({...})
});