Collection
Post cover
Created 3 month back

Best 19 jQuery Drag and Drop Examples

Collection of free jQuery drag and drop examples and plugins.

Post cover

jQuery Gridly

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

Author: ksylvest (Kevin Sylvestre)

Links: GitHub, Website

Made with: CoffeeScript (38.5%), HTML (36.2%), CSS (20.6%), Ruby (4.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
860 55 280
Post cover

jQuery Fsortable

A fixed layout sortable plugin for jQuery UI.

Author: NiGhTTraX (Andrei Picus)

Links: GitHub

Made with: JavaScript (92.3%), CSS (7.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
11 6 4
Post cover

HyperModel

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

Author: KennethanCeyer

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
27 1 1

Draggable Overflow

Author: Charlotte Dann

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

Reveal text by dragging horizontally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

TableDnD

jQuery plug-in to drag and drop rows in HTML tables.

Author: isocra (Denis Howlett)

Links: GitHub, Website

Made with: HTML (47.5%), JavaScript (43.8%), CSS (8.1%), PHP (0.6%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
391 32 379
Post cover

HTML5 Sortable jQuery Plugin

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

Author: farhadi (Ali Farhadi)

Links: GitHub, Website

Made with: HTML (59.3%), JavaScript (40.7%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
1.7k 77 391
Post cover

HQY Interact

Touch enabled jQuery plugin that lets you create powerful interactions.

Author: Rockcookies (Jacob He)

Links: GitHub, Website

Made with: JavaScript (82.0%), CSS (18.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
9 1 4
Post cover

jQuery Dragarrange

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

Author: vishalok12

Links: GitHub

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
37 5 19
Post cover

Shapeshift

A dynamic grid system with drag and drop functionality.

Author: AshesOfOwls

Links: GitHub, Website

Made with: CoffeeScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
1.7k 89 316
Post cover

Touch DnD

Advanced touch-compatible Drag and Drop library providing Draggable, Droppable and Sortable for Zepto.js and jQuery

Author: rkusa (Markus Ast)

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
105 11 31
Post cover

Drag and Drop, jQuery Plugin

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.

Author: Mikael Plate

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
134 13 41

Pantone Color Chips

Author: Jackie Zen

Links: demo and code

Made with: HTML / CSS / JS

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

Post cover

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.

Author: gridstack

Links: GitHub, Website

Made with: TypeScript (75.8%), HTML (12.9%), JavaScript (5.0%), CSS (4.7%), SCSS (1.6%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
4.2k 167 1.1k
Post cover

Pure CSS Glassmorphism Modal

Author: TOMAZKI

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery-ui.js

Post cover

Rowsorter.js

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

Author: arteyazilim (Gökhan Bora)

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
72 5 23
Post cover

Fancytree

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

Author: mar10 (Martin Wendt)

Links: GitHub, Website

Made with: JavaScript (64.5%), CSS (20.1%), HTML (8.3%), Less (5.2%), CoffeeScript (1.7%), Python (0.2%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
2.5k 141 583
Post cover

jQueryDAD.js

DAD: A simple and awesome drag And drop plugin.

Author: williammustaffa (William Lima)

Links: GitHub, Website

Made with: JavaScript (100.0%)

GitHub Activity:

⭐ Stars 👀️ Watchers 📎️ Forks
129 12 58

Craft Stationery Drag & Drop Mockup Scene

Author: Tudor Sfătosu

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS (CoffeeScript)

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

Dependencies: jquery-ui.js, draggable.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback