Performant Drag And Drop JavaScript Library – Draggable

Category: Drag & Drop , Javascript | November 27, 2019
Author: bcherny
Views Total: 1,073 views
Official Page: Go to website
Last Update: November 27, 2019
License: MIT

Preview:

Performant Drag And Drop JavaScript Library – Draggable

Description:

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
instance.get();

// 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