jQuery drag and drop plugins allow users to move any element to anywhere they want with the click of a mouse. This makes easy for users to upload files, images, videos and documents with the help of drag and drop functionality offered by jQuery Drag and Drop Plugins.
This article consists 15 jQuery Drag and Drop plugins which you can easily integrate to your web pages and setup drag and drop functionality for your websites. Following plugins are easy to use and packed with tons of effective features to deliver user friendly environment to your website users.
Don’t Miss —
12 Best jQuery Chart Plugins
30 Best jQuery Map Plugins for Your Next Project
1. Drop Uploader
Drop Uploader plugin is allows you easily convert default file input field in your form to powerful Drag & Drop area that supports multiple file uploading, file type validation and errors handling. No need to customize your existing form HTML code, just include plugin files and JS code snippet and turn it on.
Demo & Download
2. jQuery File Uploader
jQuery plugin to drag and drop files, including Ajax upload and progress bar. The idea for this plugin is to keep it very simple. Basic JavaScript / jQuery knowledge is necessary to use this plugin.
Demo & Download
3. Lobilist
LobiList is jQuery plugin for todo lists. It supports drag & drop of todos, multiple lists with different colors. It supports multiple lists, different styles, drag and drop list, Ajax configuration urls for todo CRUD and much more.
Demo & Download
4. formBuilder
A jQuery plugin for drag and drop form creation.To start building forms with this plugin call formBuilder() on the textarea you would like to make your editor. FormBuilder takes a number of options and is translatable.
Demo & Download
5. fSortable
fsortable is a fixed layout sortable plugin for jQuery UI.There’s some necessary markup you need to use to let fsortable know about your layout. Since it assumes your sortable has a fixed capacity you need to tell it how many items it can hold. It takes that information from the HTML itself by counting the number of items in your sortable and the number of empty positions.
Demo & Download
6. FieldChooser
fieldChooser is a jQuery plugin for selecting from a list of fields or values (the source) and adding them to a new list (the destination).
You move fields from the source to the destination by dragging and dropping with multi-select. Fields themselves can be simple HTML elements or more complex containers.
Demo & Download
7. Fancytree
Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag’n’drop, and lazy loading.
Demo & Download
8. Gridly
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids.
Demo & Download
9. Dynatree
Dynatree is a dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag’n’drop, and lazy loading.
It is optimized for large dynamic trees, has support for lazy loading and Ajax, keyboard aware, and supports drag and drop.
Demo & Download
10. Pep
Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.
Pep has built-in support for custom start, stop, rest, and drag events, constraining objects to their parent or the window, a debugger, and the ability to customize your own kinetic easing functions.
Demo & Download
11. Nestable
Nestable is an interactive hierarchical list. You can drag & drop to rearrange the order. It even works well on touch-screens.
Demo & Download
12. Table Drag and Drop jQuery Plugin
TableDnD is a jQuery plugin that simply adds drag & drop functionality to tables. This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list. Individual rows can be marked as non-draggable and/or non-droppable. Rows can have as many cells as necessary and the cells can contain form elements.
Demo & Download
13. Uber Zoom
Uber Zoom is a jQuery image zoom plugin which uses many features that you would normally find in a native iOS or Android app to improve the user experience, like rubberbanding and intertia. Uber Zoom fully supports mobile devices. With features like double-tap to zoom, rubberbanding and inertia, it feels almost like a native app! Uber Zoom is also responsive!
If you need to have a small preview of your image in the bottom left corner, you can enable that. The user will see a small window to navigate your image by dragging.
Demo & Download
14. Tiny Draggable
tinyDraggable is a minimalistic jQuery plugin for making objects draggable. It is compatible with jQuery 1.5+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.
Demo & Download
15. Picture Cut
Picture cut is a jQuery plugin that handles images in a very friendly and simple way, with a beautiful interface based on bootstrap or jQuery UI, has great features like Ajax upload, drag image from explorer, image crop and others.
Demo & Download
