Tiny Interactive Drag And Drop Library – Fastdrag

Category: Drag & Drop , Javascript | July 4, 2019
Authorqkorbit
Last UpdateJuly 4, 2019
LicenseMIT
Tags
Views250 views
Tiny Interactive Drag And Drop Library – Fastdrag

Fastdrag is a super tiny, eas-to-use, Vanilla JavaScript drag and drop library with support for configurable friction, rotate, and scale effects on drag.

How to use it:

Install the fastdrag with NPM.

# NPM
$ npm install fastdrag --save

Import the Fastdrag module (ES 6).

import Fastdrag from 'Fastdrag'

Or include the UMD version of the Fastdrag library from the CDN.

<script src="https://unpkg.com/fastdrag@latest/dist/fastdrag.min.js"></script>

Create a new Fastdrag instance and apply the drag and drop functionality to an element you specify.

<div id="demo"></div>
let demo = document.getElementById('demo');
let instance = new Fastdrag({
  el: demo
});

Config the friction, rotate, and scale effects.

let instance = new Fastdrag({
    el: demo,
    friction: 3,
    rotateRange: 60,
    scale: 1
});

Move the element to a specific position.

instance.to(element, options);

Destroy the instance.

instance.destroy();

Event handlers.

instance.on('start', e => {
  // drag start
})
instance.on('move', e => {
  // move
})
instance.on('end', e => {
  // drag end
})

You Might Be Interested In:


Leave a Reply