Javascript

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

Written by Kevin Liew on 09 Oct 2017
6,222 Views • Shares
0 comments

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

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.