Draggable - A Lightweight, Responsive, Modern Drag & Drop Library

Drag & Drop is one of the popular interactions being used in an UI. Depend on what types of projects, drag and drop can be a great solution to reduce unnecessary human error that requires keyboard input.

For example, instead of letting user to key in "weight" or "order number" to reorder a list, you can use drag & drop. I believe this type of user interaction is very common in games too.

Here we have a great library called draggable maintained by Shopify. It's built to be lightweight and responsive. It has a really impressive demo website with a lot of puzzle to demonstrate its capabilities such as - Swappable, Sortable, Dropable, Collidable, Accessible, Extensible, Interaction and Animation.

Features

• Works with native drag, mouse, touch and force touch events
• Can extend dragging behaviour by hooking into draggables event life cycle
• Can extend drag detection by adding sensors to draggable
• The library is targeted ES6 first

API, Options and Events

Every great plugin need to have the flexibility in configurations and also extensible.

Rest assured, draggable is one of the great one. It has many API, options and events so that you can implement it and adapt it to your project. you can see all of them in the documentation.

SPECIFICATIONS & DOWNLOAD

• TAGS:
• Javascript
• UI