Performant Drag And Drop JavaScript Library – Draggable

Preview:

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