Collection of free jQuery drag and drop examples and plugins

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

Pure CSS Glassmorphism Modal

Pure CSS Glassmorphism Modal

Author:
TOMAZKI | March 30, 2021
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css, jquery-ui.js

Pantone Color Chips

Author:
Jackie Zen | September 26, 2020
Made with:
HTML / CSS / JS

About a code

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

Craft Stationery Drag & Drop Mockup Scene

Author:
Tudor Sfătosu | February 28, 2020
Made with:
HTML (Pug) / CSS (Sass) / JS (CoffeeScript)

About a code

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

Draggable Overflow

Author:
Charlotte Dann | August 1, 2013
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

Reveal text by dragging horizontally.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Gridstack.js

Gridstack.js

Author:
gridstack | November 10, 2014
Made with:
2319 stars165 watchers

About a code

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.

Shapeshift

Shapeshift

Author:
S Elwood | October 10, 2012
Made with:
1722 stars103 watchers

About a code

A dynamic grid system with drag and drop functionality.

HTML5 Sortable jQuery Plugin

HTML5 Sortable jQuery Plugin

Author:
Ali Farhadi | January 28, 2012
Made with:
1633 stars87 watchers

About a code

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

Fancytree

Fancytree

Author:
Martin Wendt | March 28, 2012
Made with:
1561 stars146 watchers

About a code

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

jQuery Gridly

jQuery Gridly

Author:
Kevin Sylvestre | June 12, 2013
Made with:
762 stars60 watchers

About a code

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

TableDnD

TableDnD

Author:
Denis Howlett | August 37, 2011
Made with:
324 stars32 watchers

About a code

jQuery plugin to drag and drop rows in HTML tables.

Drag and Drop

Drag and Drop

Author:
Mikael Plate | October 10, 20133
Made with:
126 stars10 watchers

About a code

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.

Touch DnD

Touch DnD

Author:
Markus Ast | May 24, 2013
Made with:
94 stars10 watchers

About a code

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

DAD

DAD

Author:
William Lima | May 2, 2015
Made with:
71 stars10 watchers

About a code

DAD: A simple and awesome drag And drop plugin.

Rowsorter.js

Rowsorter.js

Author:
Gökhan Bora | September 22, 2014
Made with:
55 stars6 watchers

About a code

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

jQuery Dragarrange

jQuery Dragarrange

Author:
Vishal | October 2, 2014
Made with:
23 stars5 watchers

About a code

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

HyperModel

HyperModel

Author:
PIGNOSE | July 19, 20116
Made with:
15 stars2 watchers

About a code

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

jQuery Fsortable

jQuery Fsortable

Author:
Andrei Picus | February 20, 2014
Made with:
9 stars4 watchers

About a code

A fixed layout sortable plugin for jQuery UI.

HQY Interact

HQY Interact

Author:
Jacob He | March 17, 2016
Made with:
4 stars0 watchers

About a code

Touch enabled jQuery plugin that lets you create powerful interactions.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨