Post thumbnail: 15 jQuery Drag & Drop Plugins

15 jQuery Drag & Drop Plugins

Collection of free jQuery drag and drop plugins.

Demo image: Gridstack.js
Made by
  • gridstack
Github activity
  • 2319 stars
  • 165 watchers
About the plugin

Gridstack.js

Gridstack.js is a mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. Gridstack.js allows you to build draggable, responsive bootstrap v3-friendly layouts.

Demo image: Shapeshift
Made by
  • S Elwood
Github activity
  • 1722 stars
  • 103 watchers
About the plugin

Shapeshift

A dynamic grid system with drag and drop functionality.

Features
  • Drag and Drop: Rearrange items within a container or even drag items between multiple Shapeshift enabled containers. Dragging elements around will physically change their index position within their parent container. When a page reloads, as long as the child elements are placed in the correct order then the grid will look exactly the same
  • Works on Touch Devices: Shapeshift uses jQuery UI Draggable/Droppable for help with the drag and drop system. Luckily there is already a plugin called jQuery Touch Punch which provides touch support for jQuery UI D/D. It can be found in the vendor folder
  • Multiwidth Elements: A new feature in 2.0 is the ability to add elements that can span across multiple columns as long as their width is correctly set through CSS
  • Responsive Grid: Enabled by default, Shapeshift will listen for window resize events and arrange the elements within it according to the space provided by their parent container
Demo image: HTML5 Sortable jQuery Plugin
Made by
  • Ali Farhadi
Github activity
  • 1633 stars
  • 87 watchers
About the plugin

HTML5 Sortable jQuery Plugin

Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Features
  • Less than 1KB (minified and gzipped)
  • Built using native HTML5 drag and drop API
  • Supports both list and grid style layouts
  • Similar API and behaviour to jquery-ui sortable plugin
Demo image: Fancytree
Made by
  • Martin Wendt
Github activity
  • 1561 stars
  • 146 watchers
About the plugin

Fancytree

jQuery tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.

Demo image: jQuery Gridly
Made by
  • Kevin Sylvestre
Github activity
  • 762 stars
  • 60 watchers
About the plugin

jQuery Gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.

Demo image: TableDnD
Made by
  • Denis Howlett
Github activity
  • 324 stars
  • 32 watchers
About the plugin

TableDnD

jQuery plugin to drag and drop rows in HTML tables.

Demo image: Drag and Drop
Made by
  • Mikael Plate
Github activity
  • 126 stars
  • 10 watchers
About the plugin

Drag and Drop

This is a jQuery plugin for handling drag and drop operations with transparent support for both mouse and touch events. This means that you will be able to use the exact same code for desktop and mobile web sites.

Demo image: Touch DnD
Made by
  • Markus Ast
Github activity
  • 94 stars
  • 10 watchers
About the plugin

Touch DnD

Advanced touch-compatible Drag'n'Drop library providing draggable, droppable and sortable for Zepto.js and jQuery.

Features
  • draggable, droppable & sortable
  • touch compatibility
  • utilizes CSS3 transform and transition property for moving draggables around
  • Zepto.js compatibility
Demo image: DAD
Made by
  • William Lima
Github activity
  • 71 stars
  • 10 watchers
About the plugin

DAD

DAD: A simple and awesome drag And drop plugin.

Demo image: Rowsorter.js
Made by
  • Gökhan Bora
Github activity
  • 55 stars
  • 6 watchers
About the plugin

Rowsorter.js

Drag & drop table row sorter pluging with touch support for Vanilla JS and jQuery.

Demo image: jQuery Dragarrange
Made by
  • Vishal
Github activity
  • 23 stars
  • 5 watchers
About the plugin

jQuery Dragarrange

A basic jQuery library to arrange/order DOM elements by dragging.

Demo image: HyperModel
Made by
  • PIGNOSE
Github activity
  • 15 stars
  • 2 watchers
About the plugin

HyperModel

HyperModel helps you make related model design with jQuery. You can drag and swap each of grids and properties.

Demo image: jQuery Fsortable
Made by
  • Andrei Picus
Github activity
  • 9 stars
  • 4 watchers
About the plugin

jQuery Fsortable

A fixed layout sortable plugin for jQuery UI.

Demo image: HQY Interact
Made by
  • Jacob He
Github activity
  • 4 stars
  • 0 watchers
About the plugin

HQY Interact

Touch enabled jQuery plugin that lets you create powerful interactions.

Features
  • Fully customisable: tons of options. Easy for novice users and even more powerful for advanced developers
  • Touch and drag support: designed specially to boost mobile browsing experience. Mouse drag works great on desktop too
Back to top