fastdrag

A fast and lovely drag & drop library.

Usage no npm install needed!

<script type="module">
  import fastdrag from 'https://cdn.skypack.dev/fastdrag';
</script>

README

Fastdrag

Build Status

A fast and lovely drag & drop library.

demo

Features

  • 👌 Easy to use
  • 🚀 Tiny size, <2Kb gziped
  • 🤣 Modular, easy to extend
  • ⚡️ Only pure JavaScript

Getting Started

Installation

You can get it on npm:

npm install fastdrag --save

As a dependency:

import Fastdrag from 'Fastdrag'

Or via CDN:

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

Examples

let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})

Or in a more simple way:

let instanceList = Fastdrag.to(document.getElementsByClassName('dragdrag'))

API

Methods Description
Fastdrag Create the instance
config Modify the setting
destroy Destroy the instance
on Add eventListener to instance
to Generate instances quickly

class Fastdrag

new Fastdrag(options): Fastdrag Instance

Create the instance.

  • options:
Parameter Default Value Description Type
el document.body The container HTMLElement
friction 3 The friction of target number
rotateRange 60 The rotate range limit number
scale 1 The scale factor of Container number

config

config(options): void

Everything can be changed except 'el'.

examples:

let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})

instance.config({
  friction: 5
})

destroy

destroy(): void

Destroy the instance.

examples:

let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})

instance.destroy()

to

to(target, options): Fastdrag Instances

Parameter Default Value Description Type
target document.body The container HTMLElement | HTMLElement[]
options {} As same as Fastdrag options object

on

on(event, callback): void

Normally, you can listen the browser's native event on the instance of Fastdrag:

let demo = document.getElementById('demo')
let instance = new Fastdrag({
  el: demo,
  friction: 4
})

// Actually, animation is still moving.
demo.addEventListener('dragend', e => {
    console.log('done!')
})

But sometimes you need to get more exactly what happened:

let demo = document.getElementById('demo')
let instance = new Fastdrag({
  el: demo,
  friction: 4
})

instance.on('end', e => {
  console.log('done!')
})
  • params:
Parameter Default Value Description Type
event document.body The event name string
callback n => n The callback function function
  • event list:
Event Description
start As same as dragstart
move Every AnimationFrame of motion would trigger it
end Trigger if Animation is stopped

Inspiration

Inspired by: https://github.com/ClassicOldSong/Drag.js

License

MIT