Best jQuery Drag & Drop Plugins & Tutorials with Demo

jQuery Gridmanager : Building Rows and Grids

jQuery Gridmanager : Building Rows and Grids

jQuery GridManager is a way of building rows and grids with built in editable regions.Requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor.

dasBaum : jQuery Drag & Drop Treeview plugin

dasBaum : jQuery Drag & Drop Treeview plugin

A simple jquery ui widget supporting drag & drop, inline renaming, keyboard navigation, and other cool stuff.

Interact.js : Javascript Drag and Drop, Resizing and Gestures

Interact.js : Javascript Drag and Drop, Resizing and Gestures

Javascript drag and drop, resizing and gestures for modern desktop and mobile browsers.

Features:

  • snapping to a grid, custom anchors or paths.
  • cross browser and device, supporting {Chrome,Firefox,Opera}’ ‘{mobile,desktop}’, ‘ and Internet Explorer 8+
  • interaction with SVG elements
  • being standalone (not yet another jQuery plugin)
  • introducing 0 additional DOM elements
  • having(a). fluent ().interface

Draggabilly : Make that shiz draggable with JavaScript

Draggabilly : Make that shiz draggable with JavaScript

Make that shiz draggable with javascript.Rad because it supports IE8+ and multi-touch.

Dragon : Smart scrolling jQuery plugin

Dragon : Smart scrolling jQuery plugin

Dragon – smart scrolling jQuery plugin for correct scrolling mechanics.

Features:

  • Scroll on drag
  • Wheel fullfil
  • Extended keyboard scrolling
  • Metro style
  • One instance
  • Customizable scrollbars
  • Smoth pagination plugin
  • Touch scroll

Interact.js : Javascript drag and drop, resizing and gestures Library

Interact.js : Javascript drag and drop, resizing and gestures Library

Interact.js is a powerful, flexible, snappable drag and drop, resizing and multi-touch gestures for modern browsers (and also IE8+) javascript library.

Features:

  • snapping to a grid, custom anchors or paths.
  • cross browser and device, supporting {Chrome,Firefox,Opera}’ ‘{mobile,desktop}’, ‘ and Internet Explorer 8+
  • interaction with SVG elements
  • being standalone (not yet another jQuery plugin)
  • introducing 0 additional DOM elements
  • having(a). fluent ().interface
  • not modifying anything it doesn’t own (except to support IE8 and to change the cursor (but you can disable that))

Demos : Demo 1 Demo 2 Demo 3 Demo 4

Covering-Bad : jQuery Plugin for Cover an item by Another item

Covering-Bad : jQuery Plugin for Cover an item by Another item

A simple jQuery Plugin for cover an item by another item with dragging ability.

Sortable : JavaScript Drag & Drop Sorting Library

Sortable : JavaScript Drag & Drop Sorting Library

Sortable — is a minimalist JavaScript library for modern browsers and touch devices. No jQuery.

Features:

  • Support touch devices
  • Built using native HTML5 drag and drop API
  • Simple API
  • Lightweight, 2KB gzipped
  • No jQuery

jQuery Draggable Background Plugin

jQuery Draggable Background Plugin

A jQuery plugin to make background images draggable.

SlideScreen jQuery Plugin

SlideScreen jQuery Plugin

SlideScreen is a jQuery plugin that creates a “Before and After” effect from two images where you can drag a separator bar to reveal more or less of each image. It has several customization parameters and works on mobile devices.