Collection of free jQuery drag and drop examples and plugins. Update of December 2020 collection. 1 new item.

Links
Made with
- HTML / CSS / JS
About a code
Pure CSS Glassmorphism Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery-ui.js
Links
Made with
- HTML / CSS / JS
About a code
Pantone Color Chips
Click on the Pantone color chip to toggle between the Pantone color name and the hex value. Drag the color chips to move around! This exaple is also fully responsive.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery-ui.js
Links
Made with
- HTML (Pug) / CSS (Sass) / JS (CoffeeScript)
About a code
Craft Stationery Drag & Drop Mockup Scene
There are multiple layers, the shadow is a separate layer to blend with the bakcground. Anything else is straightfoward, having a draggable plugin that works with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery-ui.js, draggable.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Draggable Overflow
Reveal text by dragging horizontally.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

- 2319 stars
- 165 watchers
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.

- 1722 stars
- 103 watchers
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

- 1633 stars
- 87 watchers
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

- 1561 stars
- 146 watchers
Fancytree
jQuery tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.

- 762 stars
- 60 watchers
jQuery Gridly
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.

- 324 stars
- 32 watchers
TableDnD
jQuery plugin to drag and drop rows in HTML tables.

- 126 stars
- 10 watchers
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.

- 94 stars
- 10 watchers
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
andtransition
property for moving draggables around - Zepto.js compatibility

- 71 stars
- 10 watchers
DAD
DAD: A simple and awesome drag And drop plugin.

- 55 stars
- 6 watchers
Rowsorter.js
Drag & drop table row sorter pluging with touch support for Vanilla JS and jQuery.

- 23 stars
- 5 watchers
jQuery Dragarrange
A basic jQuery library to arrange/order DOM elements by dragging.

- 15 stars
- 2 watchers
HyperModel
HyperModel helps you make related model design with jQuery. You can drag and swap each of grids and properties.

- 9 stars
- 4 watchers
jQuery Fsortable
A fixed layout sortable plugin for jQuery UI.

- 4 stars
- 0 watchers
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