30 jQuery Drag and Drop Plugins

April 5, 2013 · 45 comments

by Lars

jquery-drag-drop

With jQuery drag and drop plugins, creating cool drag and drop features on your web pages it is not as hard as it used to be.

Like most others with a great interest in web front-end development, jQuery have a special place in my heart. jQuery manages to bring the real goodies to us with only a few lines of code and every day it gets better. This is because the huge jQuery community keeps shipping awesome plugins; great thanks to everyone contributing! With jQuery, it is possible to create user friendly and sophisticated web user interfaces in a lightweight and elegant way. One of the most important aspects of creating good user interfaces is taking care of the user events; e.g. the user dragging stuff around on the page. Typically, in web development, this has not been trivial at all, but with jQuery the dark clouds are gone. This post give you 30 jQuery Plugins that will give you the poser to add Drag N’ Drop capabilities to your web front-ends. Keep in mind that some are in development or not fully maintained by the authors. Be careful if you use any of the plugins in client projects as you need to be able to support the solution. We also made collections of many other types of jQuery solutions and I recommend you check out some content sliders as they are very popular right now.

This article just got an update – I added new scripts and checked all links.

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 no 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.


ElegantThemes
ThemeForest

Advertisement

iNettuts: How to Mimic the iGoogle Interface - MORE INFO | DEMO

iNettuts, dragNdrop plugins

This plugin offers, among other things, several widgets each of which can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).

Ajax Upload  - MORE INFO

drag-drop-upload

This plugin uses XHR for uploading multiple files with progress-bar and drag-and-drop.

Drag and Drop Sortable Lists - MORE INFO | DEMO

Drag And Drop, dragNdrop plugins

This plugin allows you to sort the order, then lets you save the list using ajax funtionality so the page does not reload. In addition, there is a messagebox that shows dynamically the status of whether the boxes have been moved, saved and whether the changes have been implemented to the database.

Drop n’ Save – Drag & Drop Uploader - MORE INFO |DEMO

drop-n-save

Need to accept CVs for your recruitment business online? Want to host user images? Or simply share images & files with friends and family? The unique drop and save application allows you to add this facility to your website, today and with minimum hassle.

Fancy Product Designer – jQuery plugin - MORE INFO | DEMO

Fancy Product Designer, dragNdrop plugins

This plugin is great for user customization and designing, whether it be clothing, business cards or electronic devices. You don’t need any vector files for the plugin, you just set png images for your elements and you tell the plugin which element can be colorized by the user. If it can be colorized, the image will be converted into a HTML5 canvas element.

jqDnR - MORE INFO

resize-drag

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

jDashboard - MORE INFO | DEMO

jDashboard, dragNdrop plugins

This jQuery Plugin 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.

jQuery Drag Expose | Draggable Image Gallery - MORE INFO |DEMO

drag-expose

Show your photos in a different way – Let the user drag & drop them to slide the gallery!

Ultra small code to drag everything in HTML pages - MORE INFO | DEMO

Ultra Small, dragNdrop plugins

This plugin is a very basic script quick to reuse and customize in your web projects.

Sortable Lists - MORE INFO |DEMO

sortable-list

Cool script for rearranging a list via drag and drop.

jQuery OneByOne Slider Plugin - MORE INFO |DEMO

onebyone-slider-plugin

The OneByOne Slider is a lightweight 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.

Table Drag and Drop JQuery plugin - MORE INFO

Table Drag and Drop, DragNDrop plugin

Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

Dynamic Drag’n Drop With jQuery And PHP - MORE INFO |DEMO

jquery-drag-n-drop

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI

Easy Scroll - MORE INFO |DEMO

easy-scroll

This easy scroll application was made to simplify your work and save you time in developing any kind of web template or application, it can be easily inserted in any context and has a wide range of parameters that can make your scrolling unique.

Draggable - MORE INFO

Draggable, DragNDrop plugin

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Drag-and-Drop with jQuery: Your Essential Guide - MORE INFO

drag-and-drop-guide

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

Zoomer jQuery Products Showcase - MORE INFO |DEMO

jQuery-zoomer

Zoomer! is a cool tool for showcasing products, with its built-in zoom + panning + dragging features, which can be easily customized due to its flexible theme selector and config parameters, directly from the html file. Also more configurations can be edited through the css style sheet file. It comes with 3 themes, Dark, Light & Compact, to make easy the integration on your web project.

animaDrag - MORE INFO

animadrag

AnimaDrag allows draggable items to be eased by jQuery animation, which UI draggables do not allow. This allows for a richer display of the transition between two locations, with full easing support.

$.event.special.drag - MORE INFO

special-drag

This is a jquery special event implementation of a drag event model. It is intended for use by developers who don’t need one bloated script full of idiot-proof logic and a million different options. This plugin simplifies handling drag events, by taking care of the DOM events when you bind a “drag” event handler, and triggering any other handlers at the appropriate time.

(mb)ConteinersPlus - MORE INFO | DEMO

drag and drop jquery plugins

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

resizable - MORE INFO

resizable

With this plugin you can resize your DOMs in an easy way!

ppDrag - MORE INFO

ppdrap

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 (ppDrag focuses on performance).

NestedSortable - MORE INFO

nested-sortable

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.

jQuery File Tree Aza’s revised version - MORE INFO

drag and drop jquery plugins

Modified version of http://abeautifulsite.net/notebook/58 to include drag’n’drop, callbacks and other stuff.

Dragscrollable - MORE INFO | DEMO

dragscrollable

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. Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.

Collidable Draggables - MORE INFO

Adds collision detection to draggable objects. Add “collide: ‘block’” or “collide: ‘flag’” when you create a draggable: $(".box").draggable({collide: 'flag'}); or $(".box").draggable({collide: 'block'}); In ‘flag’ mode overlapping objects receive new classes – ‘ui-draggable-overlapping’ for the object being dragged and ‘ui-draggable-overlapped’ for the other object. In ‘block’ mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.

jQuery UI multiple draggable plugin - MORE INFO | DEMO

draggable-plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group.

jQuery List DragSort - MORE INFO

DragSort, DragNDrop plugin

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

Jquery iviewer - MORE INFO | DEMO

jQuery iviewer, DragNDrop plugin

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.

(mb)ImgNavigator - MORE INFO

drag and drop jquery plugins

A photogallery for viewing very large images using a navigator map and drag. You can drag your large image in the display by the navigator or the image itself.

$().mapbox - MORE INFO

drag and drop jquery plugins

Mapbox is a plugin for creating zooming, draggable maps of limited size and depth, which have a defined boundary. It has many methods such as the ability to center the map on any given point, zoom in or out, zoom to any particular level, and move in any direction. All of these may also be accomplished either by dragging the map or with the mousewheel in conjunction with the mousewheel plugin.

Drag n Drop Scattered Gallery - MORE INFO | DEMO

scattered-gallery

Drag and drop gallery script with various look and feel options.

Author : Lars Vraa

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.

{ 23 comments… read them below or add one }

till-bilderbook May 31, 2013 at 2:37 pm

hi,

many nice options, but unfortunately i haven’t found what I was looking for: I would need a solution to drag’ndrop’n’submit – so that a user can make a selection of images and then submit the selection, notifying me that the user shows interest in photo x and photo y…

If anybody has seen anything alike I would be very glad to hear about it in some follow up comment or so…

thnx!! till…

Reply

Narmadai Software Technologies May 30, 2013 at 10:57 am

Hi,

Really thanks for this information technology effective and best D&D solutions

Reply

Kiash May 19, 2013 at 4:43 am

WOW! Nice collection of drag n drop plugins. Thank you very much for share.

Reply

sugeet April 12, 2013 at 7:51 am

Please help me how to implement drag n drop functionality in jsheet tool + javascript

Reply

Mindy January 10, 2013 at 6:45 am

I quite like looking through a post that will make men and women think. Also, thank you for permitting me to comment!

Reply

Nilesh G October 21, 2012 at 4:21 pm

Thanks for the post.. It is very helpful.. : )

Reply

annesofie October 22, 2012 at 8:44 am

Hi Nilesh
Glad you liked the article

Best regards,
Sofie

Reply

Nishant May 26, 2012 at 3:59 pm

Superb list Lars, i really appreciate your efforts. The list is really good with each and every item very useful.Once again, thanks :)

Reply

Paul Weston April 10, 2012 at 9:50 am

Thought this was a great article and one I will using as a constant resource for me with my future projects. I am always blown away with what can be achieved using jQuery and this article will give me another set of tools to use to push my designs and how I can expand on user interaction. There are some great examples you have put together and I really like the jQuery Drag Expose / Draggable Image Gallery. I love how you can either drag through the gallery or set it to play automatically. Great article and I look forward to more from you.

Reply

Graphic Designers February 18, 2011 at 10:49 am

Great list of JQuery drag’n’drop resources, we tried it out for the first time last week using the Maps plugin and worked a treat!

Thanks

Reply

Neeraj Dhiman February 17, 2011 at 7:57 am

Great set of plugin resources. Thanks for sharing.

Reply

sanalcadi February 8, 2011 at 3:36 pm

Thank You For Post. 3 and 12 nice

Reply

TrxBox December 13, 2010 at 10:39 pm

Thanks. It was easy to understand this material.

Reply

you November 10, 2010 at 4:35 pm

why would you write an article about jquery then use images instead of live examples?

FAIL

Reply

Aman August 13, 2010 at 3:33 pm

hi
i like you plugin. i have also some jquery drag and drop plugins.please see:-

http://jquery13.blogspot.com/2010/08/30-drag-and-drop-jquery-plugins.html

Thanks
Aman

Reply

Cleanse August 5, 2010 at 1:40 am

Mapbox was just what I was looking for. Thank you Google for sending me here :-)

Reply

tripwire team August 5, 2010 at 7:27 am

I thanks google for sending you ;)

Reply

anand August 2, 2010 at 10:52 am

Without jQuery.UI plug-in Drag & Drop possible. only use jQuery only.

Reply

Michael Pehl May 16, 2010 at 3:54 pm

Bookmarked :)

Reply

Thomas Craig Consulting March 14, 2010 at 10:34 pm

Nice list, thanks for sharing. Have only used JQuery drag’n’drop on one project so far, but made the users experience that more pleasant. It is great for admin UI’s that manage photos/folders/ or files.

Reply

Elena January 25, 2010 at 7:02 pm

Thanks. It was easy to understand this material. I am waiting for new information about this theme.

Reply

Danie Nowak January 25, 2010 at 3:34 pm

Nice article, i created my self a jQeury Plugin, which creates a draggable and resizable sticky notes container. Like the programm sticky notes on a mac.

You find it here: http://jquery-sticky-notes.com

Best Regards

Daniel

Reply

Bits January 25, 2010 at 11:29 am

wow.. really nice article.
already bookmarked. Thanks for the info.
Here is a simple article to do resize/drag using normal jquery ui.
http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 22 trackbacks }

Previous post:

Next post:


Web Analytics