Performant Drag And Drop JavaScript Library - Draggabilly

Draggabilly is a jQuery & Vanilla JavaScript plugin that provides an advanced, performant, smooth, touch-friendly Draggable functionality on any DOM element.

More features:

• Moves elements within its parent container.
• Snaps the draggable element to a grid.
• Custom drag handle.
• Allows you to style the draggable element when dragging.

How to use it:

1. Install & download the package.

# NPM
$ npm install draggabilly --save

2. Load the Draggabilly library in the html document.

<!-- As A Vanilla JavaScript Plugin -->
<script src="/path/to/dist/draggabilly.pkgd.min.js"></script>

<!-- Or From A CDN -->
<script src="https://unpkg.com/draggabilly/dist/draggabilly.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/draggabilly/draggabilly.min.js"></script>

<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/draggabilly.pkgd.min.js"></script>

3. Attach the function to the element to be draggable. Done.

<div class="draggable"></div>

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable');

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly();

4. Style the element when dragging.

.draggable.is-pointer-down {
  background: #09F;
  z-index: 2; 
}

.draggable.is-dragging { opacity: 0.7; }

5. Limit the range of movement of the element to its parent container.

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable',{
    containment: true
});

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly({
    containment: true
});

6. Allow the element to be moved only along the X or Y axis.

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable',{
    axis: 'x'
});

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly({
    axis: 'y'
});

7. Allow the element to be moved only along the X or Y axis.

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable',{
    axis: 'x'
});

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly({
    axis: 'y'
});

8. Auto snap the draggable element to a grid you specify.

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable',{
    grid: [ 20, 20 ]
});

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly({
    grid: [ 20, 20 ]
});

9. Customize the drag handle.

<div class="draggable">
  <div class="handle"></div>
</div>

// As A Vanilla JavaScript Plugin
var draggable = new Draggabilly('.draggable',{
    handle: '.handle'
});

// As A jQuery Plugin
var $draggable = $('.draggable').draggabilly({
    handle: '.handle'
});

10. Event handlers.

// As A Vanilla JavaScript Plugin
draggable.on(...);
draggable.off(...);
draggable.once(...);

// As A jQuery Plugin
$draggable.on(...);
$draggable.off(...);
$draggable.one(...);

$draggable.on( 'dragStart', function( event, pointer ) {
  // on drag start
});

$draggable.on( 'dragMove', function( event, pointer, moveVector ) {
  // on move
});

$draggable.on( 'dragEnd', function( event, pointer ) {
  // on drag end
});

$draggable.on( 'pointerDown', function( event, pointer ) {
  // on press down
});

$draggable.on( 'pointerMove', function( event, pointer, moveVector ) {
  // on pointer move
});

$draggable.on( 'pointerUp', function( event, pointer ) {
  // on press up
});

$draggable.on( 'pointerUp', function( event, pointer ) {
  // on press up
});

$draggable.on( 'staticClick', function( event, pointer ) {
  // on static click
});

$draggable.on( 'pointerUp', function( event, pointer ) {
  // on press up
});

11. API methods.

// enable the plugin
$draggable.draggabilly('enable')
draggable.enable();

// disable the plugin
$draggable.draggabilly('disable')
draggable.disable();

// set position
$draggable.draggabilly( 'setPosition', x, y )
draggable.setPosition( x, y )

// destroy the plugin
$draggable.draggabilly('destroy')
draggable.destroy()

// get the instance
var draggable = $('.draggable').data('draggabilly')

// get the position => { x: 10, y: -10 }
draggable.position

---

This awesome jQuery plugin is developed by desandro. For more Advanced Usages, please check the demo page or visit the official website.