jQuery drag and drop plugins are most useful elements especially for web applications. I showcase here some fantastic JS drag and drop examples which can be used for any kind of website developments.

Are you creating a web application or custom CMS project? Looking for drag and drop tutorials or plugins? If yes then you are in the right place. Here you will find some excellent jquery drag and drop tutorials. As a web developer I also used this type of plugins into my many projects. It’s saved my lots of time. You can also choose one of them from below & can use in your next project. If you have very good knowledge in javascript & jquery & also have lots of time to completing your project then you can create this type of plugin by yourself. But if you don’t have much knowledge about javascript/jquery & can’t create drag n drop plugin then no need to worry about it. Some fantastic developers already created some awesome & advance drag & drop jquery plugins & released those for free.

These plugins are really useful while you are creating a advance custom web development projects especially web application. All of the plugins below have some useful features that can be make your project more powerful. You will be able to sort your table data’s, can be turn any DOM element in draggable object, can add drag-n-drop file & image uploads, create horizontal & vertical draggable object, create touch enable object for mobile devices, resizable object with drag & drop functionality & much much more. Hope this collection will save your valuable times also like me. If you found this collection helpful & it can be also helpful for other then don’t hesitate to share this in social media. Thank You!

 


jQuery Drag/Drop Plugins


Draggable – jQuery elements Drag and Drop Plugin

Draggable - jQuery elements Drag and Drop Plugin

This is a free mouse draggable jquery plugin which will allow you to drag & drop any element. You can set auto scroll true, so users can drag & drop any element beyond the viewport.

Preview | Source

 


Gridster.js – Draggable layouts jQuery plugin

Gridster.js - Draggable layouts jQuery plugin

Gridster is another excellent drag and drop plugin which is comes with multi-column grid. It allows you to building fantastic draggable layouts from elements spanning multiple columns.

Preview Source

 


jquery.pep.js – DOM element draggable object lightweight jQuery plugin

jquery.pep.js - DOM element draggable object lightweight jQuery plugin

This is a very lightweight drag and drop js plugin which can make any DOM element into a draggable object. It fully browser compatible & works with click & touch.

Preview Source

 


Gridly – jQuery drag and drop plugins with expand items

Gridly - drag and drop plugins with expand items

Gridly is another awesome plugin for creating a grid system gallery where your users can drag and drop elements, dynamically add or remove elements & also can click to expand each item for viewing in larger size.

Preview Source

 


Dropzone – Drag and Drop file uploads with image previews plugin

Dropzone - Drag and Drop file uploads with image previews plugin

By implementing Dropzone into your project you can give your users an amazing file uploading experience. Your users can upload files with drag & drop functionality & also can see image preview after completing the upload.

Preview | Source

 


HTML5 Image upload responsive Plugin with drag & drop, crop & ratio

HTML5 Image upload responsive Plugin with drag & drop, crop & ratio

If you are looking for a draggable image uploader with preview then this is the right plugin for you. Your users can upload images by dragging into a selected area & they will see a image preview after completing their uploads.

Preview Source

 


Mikeplate – Drag and drop plugin for jQuery with transparent support

Mikeplate - Drag and drop plugin for jQuery with transparent support

Mikeplate is a simple js drag and drop example. By using this plugin you can add text drag-n-drop functionality. This plugin will allow users to drag drop texts in a certain area with some simple effects.

Preview Source

 


Table Drag and Drop Free JQuery plugin

Table Drag and Drop Free JQuery plugin

If you want a plugin which will drag & drop table list elements from top to bottom or bottom to top then here is a nice plugin which is able to do that.

Preview | Source

 


Dragon – Best js Drag and Drop plugin

Dragon - Best js Drag and Drop plugin

By using Dragon you will be able to add some fantastic drag and drop functionality into your project. You can drag-drop any DOM element anywhere beyond the viewport, left to right, up & down & only within a certain area.

Preview Source

 


Dragged – Drag and Drop Interaction Ideas with jQuery & css3

Dragged - Drag and Drop Interaction Ideas with jQuery & css3

This is a awesome jquery drag and drop example which through you can add a fantastic drag & drop user interface into your project. It comes with 7 different style drag-n-drop features. All examples are build with modern effects & it’s completely free to use.

Preview Source

 


tinyDraggable – Free minimalistic jQuery plugin for making objects draggable

tinyDraggable - Free minimalistic jQuery plugin for making objects draggable

tinyDraggable is a minimalist style jquery plugin which can turn any DOM element into draggable object. You can drag your selected DOM element & drop anywhere you want by using this plugin.

Preview Source

 


Crafted – jQuery Drag and Drop Gallery Plugin

Crafted - Drag and Drop Gallery Plugin

tinyDraggable is a minimalist style jquery plugin which can turn any DOM element into draggable object. You can drag your selected DOM element & drop anywhere you want by using this plugin.

Preview Source

 


Newsletter Builder – Drag and Drop using jQuery Newsletter Builder plugin

Newsletter Builder - Drag and Drop using jQuery Newsletter Builder plugin

This is an excellent jquery drag n drop newsletter builder. If you are creating a project where you need to add newsletter functionality then this plugin will save your huge time. By integrating this plugin you will be able to give your users a draggable newsletter builder interface where your users can create their own newsletter on fly like mailchimp.

Preview Source

 


Vaden – Shopping cart drag and drop jQuery Plugin

Vaden - Shopping cart drag and drop jQuery Plugin

Are you creating an ecommerce project? If yes then this is a must have plugin for you which through you can give your customers a smooth draggable shopping experience. You customers can drag any product into their shopping cart very smoothly & also can remove those products if they don’t want to purchase.

Preview Source

 


Dropper – A jQuery plugin for simple drag and drop uploads

Dropper - A jQuery plugin for simple drag and drop uploads

Dropper can be a best jquery drag and drop example for any kind of file uploading projects. If you are creating a project where you users will upload files then you can give your users a great drag & drop file uploading interface by using Droppper.

Preview Source

 


Dragmove – Lightweight draggable functionality on DOM elements

Dragmove - Lightweight draggable functionality on DOM elements

This is another lightweight drag-drop js plugin which through you can turn any DOM element into draggable object. You can drag any dom element & drop anywhere you want by using this plugin.

Preview Source

 


Draggable – Free Metro App Showcase jQuery Plugin

 

Draggable is a jquery mobile drag and drop plugin which is suitable for app showcasing on mobile devices.

Preview Source


jDashboard – Drag and drop dashboard widget creating Plugin

jDashboard - Drag and drop dashboard widget creating Plugin

Preview Source

 


Collections – For ecommerce site Drag and Drop jquery collection add-on

Collections - For ecommerce site Drag and Drop jquery collection add-on

This is a fantastic js drag and drop plugin which is suitable for any kind of ecommerce websites. Your customers will be able to view products screenshots in variation sizes with a nice drag-n-drop interface.

Preview Source

 


Interact – Multiple Interaction drag and drop Plugin

Interact - Multiple Interaction drag and drop Plugin

Interact comes with some amazing drop and drop examples. If you want to implement drag and drop functionalities for resizing certain elements, move elements in a certain area, Hold element to rotate or click element to change colors then this plugin will help you to do that.

Preview Source

 


Draggabilly – Horizontal or vertical axis moving drag and drop Plugin

Draggabilly - Horizontal or vertical axis moving drag and drop Plugin

This plugin comes with multiple drag drop functionality. By using Draggabilly you can add horizontal, vertical & independent drag & drop DOM element. Elements can be draggable within a selected area, can be independently draggable within viewport etc.

Preview Source

 


Sortable – Minimalist JavaScript library for reorderable drag and drop lists

Sortable - Minimalist JavaScript library for reorderable drag and drop lists

Sortable is a clean & minimalist javacript drag & drop plugin. You will be able to drag-n-drop list elements from top-to-bottom, reorder elements, dynamically add or remove elements, drag selected element & drop in a selected area & much more.

Preview Source

 


Draggable Background – Free jQuery plugin to make background images draggable

Draggable Background - Free jQuery plugin to make background images draggable

You can move background images in draggable interface by using this plugin.

Preview Source

 


Elastic Stack – Elastic Dragging Interaction jQuery Plugin

Elastic Stack - Elastic Dragging Interaction jQuery Plugin

Elastic Stack is a modern drag and drop example which through you will be able to present your contents with a amazing draggable experience. It’s suitable for photo album.

Preview Source

 


Touchdragh – Makes elements draggable horizontally by touch

Touchdragh - Makes elements draggable horizontally by touch

You can create a touch enabled drag n drop centered element showcasing for your project. It has some nice functionality to customize this plugin according to your requirements.

Preview Source

 


Undraggable – Single elements draggable free jQuery Plugin

Undraggable - Single elements draggable free jQuery Plugin

Undraggable comes with multiple style dragging functionality. You can control your DOM elements according to your needs by using this. You can add horizontal, vertical & independent draggable functionality to any DOM element with this plugin.

Preview Source

 


Dragdealer – Drag-based JavaScript component, embracing endless UI solutions

Dragdealer - Drag-based JavaScript component, embracing endless UI solutions

This is a suitable js plugin for mobile drag and drop interfaces. If you want to add a slide to unlock functionality into your apps then this plugin will help you to do this. You can also drag element to a certain percentage meter horizontally or vertically.

Preview Source

 


File Uploader – drag and drop ajax file uploader

File Uploader - drag and drop ajax file uploader

This is an excellent drag and drop file uploader jquery plugin which through your users can upload images with drog-n-drop experience. If you are creating a project that need to receive images from users like profile images, samples or any other images then you can implement this plugin. It has progress bar which through users also can see how their images are uploading.

Preview Source

 


Nestable – Drag & drop hierarchical list with mouse and touch compatibility

Nestable - Drag & drop hierarchical list with mouse and touch compatibility

Nestable is exactly like wordpress drag & drop menu items. If you are creating a custom content management system & want to implement the same thing then you can do it with Nestable. It can make your table elements draggable.

Preview Source

 


Shapeshift – jQuery Drag and Drop Example for Column Grid System

Shapeshift – jquery Drag and Drop Example for Column Grid System

Shapeshift comes with advance draggable features. You can make your column grid draggable easily by using Shapeshipt plugin.

Preview Source

 


HTML5 Sortable – jQuery Plugin Drag and Drop free Plugin

HTML5 Sortable - jQuery Plugin Drag and Drop free Plugin

Make your table list items sortable by dragging with HTML5 Sortable plugin.

Preview Source

 


jqDnR – Lightweight Minimalistic Drag and Resize jQuery Plugin

jqDnR - Lightweight Minimalistic Drag and Resize jQuery Plugin

jqDnR is a simple jquery drag-n-drop plugin which through you can make any DOM element into a draggable object. You also can resize the element by dragging.

Preview | Source

 


jQuery Sortable – flexible, opinionated sorting and draggable free plugin

jQuery Sortable - flexible, opinionated sorting and draggable free plugin

It’s an easy to use & simple sorting & dragging jquery plugin which through you can turn table items into draggable object. You can move your table items top-to-bottom & bottom-to-top.

Preview Source

 


 

1 reply
  1. eat rice
    eat rice says:

    Εveryone loves ԝhat yoս guys tend to be uρ too.
    Such clever ᴡork and reporting! Кeep ᥙp the wonderful works guys I’ve incorporated уoᥙ guys to my own blogroll.

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.