Dragging and droppping elements can be very useful and intuitive while creating websites, in one of my previous posts, I have explained how we can implement drag and drop functionality using Javascript and HTML 5, but in this post, I am going to write about few JS based plugins, which makes easier to implement drag and drop functionality in website.

1. draggable.js

draggable.js is a customizable draggable/droppable/sortable/swappable. Draggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.

Demo

draggable.png

2. Dragula

It doesn't depeend on any other framework and Dragula is drag and drop library very easy to use. It offers browser support includes every sane browser and IE7+. (Granted you polyfill the functional Array methods in ES5). Framework support includes vanilla JavaScript, Angular, and React.

demo

3. Interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.

drag-and-drop-library-interact-min.png

Interact.js website also provides you various samples, which you can view. It is easy to manage and can be used with Angular.js

4. Draggabilly

Draggabilly is a VanillaJS plugin that allows you to make any element draggable, it supports IE10+ and touch devices.

Demo

5. GridList

Drag and drop library for two-dimensional, resizable and responsive lists.

grid-list-drag-drop-javascript.png

6. Slip

A tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies.

7. ng-sortable

AngularJS Library for Drag and Drop, supports Sortable and Draggable. No JQuery/JQuery UI used. Supports Touch devices.

ng-sortable-angular-drag-drop.png

Demo