10 Best Advanced Drag And Drop Plugins In JavaScript

by jQueryScript,

What Is Drag And Drop?

Drag And Drop is one of the most commonly used features in today's web page or applications that allow the user to change the position of an object (element) by using mouse drag or touch events.

How does Drag and Drop work?

HTML5 (the latest version of Hypertext Markup Language) provides a basic HTML Drag and Drop API on your web app. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.

See the Pen HTML5 Drag And Drop API by iqq800 (@iqq800) on CodePen.

The Best Drag and Drop Plugin?

To apply more advanced functionalities to draggable elements, you might need a JavaScript plugin to extend and enhance the native Drag And Drop API.

This is a list of 10 best jQuery and Vanilla JavaScript advanced and enhanced drag and drop plugins from which you can choose for your next web project. Have fun.

Table of contents:

jQuery Drag And Drop Plugins:

jQuery Drag'n'drop Sorting Plugin For Bootstrap - html5sortable

html5sortable is a tiny jQuery plugin which adds draggable sorting functionality to Bootstrap framework by using native HTML5 drag and drop API.

jQuery Drag'n'drop Sorting Plugin For Bootstrap - html5sortable

[Demo] [Download]


jQuery Plugin To Arrange/Order DOM Elements By Dragging - dragArrange

dragArrange is a small jQuery drag'n drop plugin which allows to arrange/re-order a list of any DOM elements by mouse drag.

jQuery Plugin To Arrange/Order DOM Elements By Dragging - dragArrange

[Demo] [Download]


jQuery Plugin To Sort Nested Lists Using Drag and Drop - nestedSortable

nestedSortable is a jQuery & jQuery UI extension which enables drag and drop functionality on nested lists (tree structure) to make them sortable with a handle.

jQuery Plugin To Sort Nested Lists Using Drag and Drop - nestedSortable

[Demo] [Download]


Mobile-friendly Drag And Drop Plugin With jQuery - draganddrop.js

draganddrop.js is a jQuery drag and drop plugin that enables sortable and draggable functionalities on any DOM elements without requiring the jQuery UI library.

Mobile-friendly Drag And Drop Plugin With jQuery - draganddrop.js

[Demo] [Download]


Drag & Drop Multiple Elements At Once With jQuery - Multidraggable

Multidraggable is a jQuery plugin used to extend the jQuery UI's draggable interaction that enables the user to select and drag & drop multiple elements at once.

Drag & Drop Multiple Elements At Once With jQuery - Multidraggable

[Demo] [Download]


Vanilla JavaScript Drag And Drop Plugins:

Lightweight JS Sorting Library with Native HTML5 Drag and Drop – SortableJS

Sortable is a lightweight and simple javascript library that makes a list of items sortable by using native Html5 drag and drop API. Works with all the modern browsers and touch devices.

Lightweight JS Sorting Library with Native HTML5 Drag and Drop – SortableJS

[Demo] [Download]


Pure JavaScript Drag and Drop Library – dragula.js

dragula.js is a simple, dependency-free, touch-enabled JavaScript library that provides drag and drop functionality on DOM elements.

Pure JavaScript Drag and Drop Library – dragula.js

[Demo] [Download]


Move Items Between Two Containers with Native JS Drag and Drop

A very simple pure JavaScript solution to move items between containers/boxes by drag’n’ drop.

Move Items Between Two Containers with Native JS Drag and Drop

[Demo] [Download]


Lightweigt HTML5 Drag And Drop Sortable Library – html5sortable

html5sortable is a lightweight and standalone JavaScript library for re-sorting a group of list and/or grid items using native HTML5 drag and drop API. Supports exclude, nested, connected lists and even table rows.

Lightweig HTML5 Drag And Drop Sortable Library – html5sortable

[Demo] [Download]


Minimal Drag & Drop JavaScript Library – displace.js

displace.js is a lightweight yet configurable JavaScript library used to create movable elements with drag and drop support.

Minimal Drag & Drop JavaScript Library – displace.js

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Draggable Elements on the web & mobile? Check out the jQuery Drag And Drop and JavaScript Drag And Drop sections.