You can use jQuery drag and drop plugins to add good looking and user-friendly drag and drop functionality to your web sites and applications. Drag and drop interfaces are great for helping users to quickly sort and interact with lists of elements. In addition, drag and drop is typically used in dashboards to organize widgets in a visual way. Further as a possibility to allow users to upload files simply by dragging them into an area on a web page. Applications like Gmail (attach files) and WordPress (upload media) are great examples of how this is done effectively and with great comfort for the users.

In this post, I give you a collection of more than 35 jQuery plugins with drag and drop capabilities you can use to make you your web pages more interactive and user friendly.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

jDashboard – MORE INFO / DEMO

jDashboard is a jQuery Plugin that gives you an easy way to create a dynamic widget area. The widgets can easily be re-arranged and collapsed/expanded, and the layout is saved either in a MySQL database, or with HTML5 local storage (falling back to using cookies) so your users don’t need to start over when they come back to their dashboard.

Drag and Drop Sortable Lists – MORE INFO / DEMO

This plugin is built from Jquery, CSS , mySQL, Ajax and PHP. Allows saving and renaming of cookies with limited development experience required.

Draggable – MORE INFO / DEMO

jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own.

Cropzoom – MORE INFO / DEMO

CropZoom is a plugin that let you select an area of an image and then crop it. With this tool you also will be able to zoom in or to zoom out, to drag and also rotate an image. This plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI to work. Some code was taken from jquery.svgdom.js Written by Keith Wood.

jQuery Drag Expose | Draggable Image Gallery – MORE INFO / DEMO

jQuery Drag Expose is a jquery plugin used to dynamically present your images. It has a drag and drop image slider with facilitated slide buttons. The plugin is also totally customizable through XML and includes an XML Code Genration Form. The plugin is also easy to integrate with any website.

iGoogle Interface – MORE INFO / DEMO

This is a tutorial on how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications.

jQuery Dragpan – MORE INFO / DEMO

jQuery dragPan is a plugin that allows you to create an element that can be larger than the user’s browser so it can be dragged around. It can be used for custom maps for shops, shopping centres, theme parks, zoos, ships, festival sites, theatre seating plans, airports, housing estates and even for tables, images etc. In fact it allows you to drag almost any large HTML render area.

Drop n’ Save – Drag & Drop Uploader – MORE INFO / DEMO

A cool drag and drop plugin that could be used for file sharing and hosting of images.

Fine Uploader – MORE INFO / DEMO

Fine Uploader achieves a user-friendly file-uploading experience over the web. It’s built as a Javascript plugin for developers looking to incorporate file-uploading into their website. This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere. It does not use Flash, jQuery, or any other external libraries. There is an optional jQuery plug-in that can be used to integrate Fine Uploader into your project, but it is NOT required. The same features are available with or without the jQuery plug-in.

Drag and Drop with jQuery your Essential Guide – MORE INFO / DEMO

This tutorial will teach you how to use jQuery, and the jQuery UI Draggable and Droppable plugins to create a drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.

Sortable – MORE INFO / DEMO

jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own.

jQuery OneByOne Slider Plugin- MORE INFO / DEMO

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too. The latest update add an extra example, which make Twitter Bootstrap Carousel support the one by one animation.

JqDNR – MORE INFO

jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements.

Dynamic Drag’n Drop with jQuery and PHP – MORE INFO / DEMO

This plugin is created with jquery and jquery UI. It is installed and run using JavaScript frameworks.

Drag n Drop Scattered Gallery – MORE INFO / DEMO

Drag n Drop Scattered gallery is the new way of presenting your pictures. It has a draggable interface, supports high resolution photos and it is very easy to setup.

Drag Scrollable – MORE INFO / DEMO

Drag Scrollable allows you to allows you to scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging. It can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.

Table Drag and Drop jQuery Plugin – MORE INFO

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Ultra Small Code to Drag Everything In HTML Pages – MORE INFO / DEMO

This is an article on how to have a very basic script quick to reuse and customize in your web projects.

PP Drag – MORE INFO

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI‘s Draggable. Currently supported is a small subset of its options, but the implementation is different.

animaDrag – MORE INFO

animaDrag is an ultra lightweight drag and drop plugin that is dependent of the jQuery UI framework.  It allows draggable items to be eased by jQuery animation.

Iviewer – MORE INFO

JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

Nested Sortable – MORE INFO

NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.