Getting Started with Draggabilly

Draggabilly makes it easy to drag and drop various elements on a web page.

It is also on github.



Package managers

Install with npmnpm install draggabilly

Install with Bowerbower install draggabilly


Link directly to draggabilly.pkgd.min.js on

<script src=""></script>


Initialize Draggabilly as a jQuery plugin

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

Initialize Draggabilly with vanilla JS

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


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

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.


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

Leave a Comment

Your email address will not be published.