Login With Github

Getting Started with Draggabilly

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

It is also on github.

Install

Download

Package managers

Install with npmnpm install draggabilly

Install with Bowerbower install draggabilly

CDN

Link directly to draggabilly.pkgd.min.js on unpkg.com.

<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

Usage

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

Classes

  • .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.

License

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

0 Comment

temp