Performant Drag And Drop JavaScript Library – Draggable

Category: Drag & Drop , Javascript | November 27, 2019
Views Total:1,549 views
Official Page:Go to website
Last Update:November 27, 2019


Performant Drag And Drop JavaScript Library – Draggable


A performant and cross-browser JavaScript Draggable library which makes any elements moveable via drag and drop.

How to use it:

1. Download and load the draggable.js library.

<script src="./draggable.js"></script>

2. Attach the function to the target element and done.

<div class="demo"></div>
var element = document.getElementsByClassName('demo')
new Draggable(element);

3. Limit the draggable functionality to  X and/or Y axis.

new Draggable(element,{
    limit: {
      x: [1,10],
      y: null

4. All possible options.

new Draggable(element,{
    // grid cell size for snapping to on drag
    grid: 0,                
    // disallow drag when target passes this test
    filterTarget: null,     
    // limit the drag bounds
    limit: {                
      x: null, 
      y: null
    // threshold to move before drag begins (in px)
    threshold: 0,           
    // change cursor to reflect draggable?
    setCursor: false,       
    // change draggable position to absolute?
    setPosition: true,      
    // snap to grid when dropped, but not during
    smoothDrag: true,       
    // move graphics calculation/composition to the GPU
    useGPU: true

5. Event handlers. Available parameters:

  • element: target element
  • x: X axis
  • y: Y axis
new Draggable(element,{
    onDrag: noop,
    onDragStart: noop,
    onDragEnd: noop

6. API methods.

// Get the current coordinates
// Move to the specified coordinates
instance.set(x, y);
// Set options
instance.setOption(property, value);
// Destroy the instance
instance.destroy ();

You Might Be Interested In:

Leave a Reply