This post gives you 10 jQuery Drag and Drop Plugins (you may have not used before) that will give the poser to add Drag N’ Drop capabilities to your frontend. Take note though that some may still be beta/development or not fully maintained by the authors. Enjoy!

Related Posts:

Update 19/05/2013: Found a cool drag/drop/filter plugin called jQuery.Shapeshift.

1. Drag n Drop Scattered Gallery

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

Drag n Drop Scattered Gallery


2. (mb)ImgNavigator

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.



3. jQuery List DragSort

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

jQuery List DragSort

Source + Demo

4. Ajax Upload; A file upload script with progress-bar, drag-and-drop

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

Ajax Upload

Source + Demo

5. Drop n’ Save – Drag & Drop Uploader

This unique drop and save application allows you to add this facility to your website, today and with minimum hassle.

Drop n’ Save


6. (mb)ConteinersPlus

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



7. jQuery Drag Expose | Draggable Image Gallery

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

jQuery Drag Expose


8. Dynamic Drag’n Drop With jQuery And PHP

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

Dynamic Drag’n Drop


9. Collidable Draggables

Adds collision detection to draggable objects.

Collidable Draggables

Source + Demo

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



Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Thao

    Very helpful, I found a good solution through this post.

  • sdsdsd


  • Coders Helpdesk

    Great Collections Thanks for sharing..

  • Saul

    Thanks man so helpful!!!

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.