18 jQuery Drag & Drop Examples

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

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

About a code

Draggable Overflow

Reveal text by dragging horizontally.

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

Responsive: yes

Dependencies: -

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.

Shapeshift

A dynamic grid system with drag and drop functionality.

• 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

HTML5 Sortable jQuery Plugin

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

• 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

Fancytree

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

jQuery Gridly

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

TableDnD

jQuery plugin to drag and drop rows in HTML tables.

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.

Touch DnD

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

• draggable, droppable & sortable
• touch compatibility
• utilizes CSS3 transform and transition property for moving draggables around
• Zepto.js compatibility

DAD

DAD: A simple and awesome drag And drop plugin.

Rowsorter.js

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

jQuery Dragarrange

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

HyperModel

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

jQuery Fsortable

A fixed layout sortable plugin for jQuery UI.

HQY Interact

Touch enabled jQuery plugin that lets you create powerful interactions.

• 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