During the past few years, JQuery has been able to replace the use of Flash thereby enabling sites to perform better and faster – without having to forego many of the features and functions which Flash presented users in the past.
JQuery continues to propel forward on nearly a daily basis- with developers continually creating and adding new functions for site users and designers alike to achieve nearly the ( once thought of ) impossible by which to enhance a websites functionality and elements. With JQuery Drag & Drop designers and users alike are now able to add draggable functionality to any DOM element. Drag & Drop JQuery can now allow you to move any particular draggable object with the click of a mouse and drag it anywhere within the page.
In this article, we would like to present our readers with some of the best Drag & Drop JQuery Plugins by which to enhance their upcoming projects or add that extra functionality to their web pages. Let us know whether you have used any of these Drag & Drop Plugins within your projects / sites and which you prefer and why in the comment section below. Enjoy !!
1. jQuery File Uploader
jQuery File Uploader is a jQuery plugin to drag and drop files, including ajax upload and progress bar. The idea for this plugin is to keep it very simple; unlike other options/plugins that mess up a lot with the markup and provide some really ‘hacky’ ways to make it available for prehistoric browsers.
2. Shapeshift
Shapeshift is a plugin which will dynamically arrange a collection of elements into a grid in their parent container. Shapeshift is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins. Position any item within the grid by dragging and dropping them into place. Shapeshift will try to find a logical place for it and display that to you.
3. Lazy Line Painter
Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using jQuery. It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin. Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed. The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.
4. Gridster
Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered. The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid. And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.
5. HTML5 Sortaable
This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI’s sortable. It is lightweight (less than 1kb when minified/gzipped), supports “connected lists(moving items between different lists)” and works in all major browsers.
6. Percentage Loader
Percentage Loader is a jQuery plugin which makes use of HTML5 canvas(no images) for creating a very good looking loader. The loader is only 10kb (minified), can also be used as a drag ‘n’ drop supported controller (like a circular volume button) and multiple instances of it can be displayed in the same page.
7. jQuery Knob
jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the “volume controls” in radios). It works by transforming any given input fields according to the values defined in its attributes and can be drag ‘n’ dropped to change the value. We can define the min-max values, default value on initial load, color and put it into “read-only” mode (which is also good for using it as a visualization component).
8. jQuery File Upload
jQuery File Upload is an impressive plugin for creating a flexible and user-friendly upload functionality with ease. The plugin support multiple file selection and drag ‘n’ drops. It can display a preview of images to be uploaded and progress bars exist to inform users. jQuery File Upload can handle cross-domain, chunked and resumable file uploads. File types and max-min sizes can be restricted with simple functions and it can work with any server-side language.
9. jOrgChart
jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output. It has support for any depth, clicking each item can show/hide the sub-levels and drag ‘n’ dropping elements from one node to another is possible, the interface will adjust the levels accordingly.
10. 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.
11. Droparea
Droparea is a HTML5 drag and drop image file uploader jQuery plug-in and a php script for server-side. Simply drag the image file into the specified area, the image will be automatically uploaded to your server. You can also see the progress of the upload too. It has been tested on Google Chrome and Mozilla Firefox.
12. jQuery Gridly
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids.
13. jQuery. Kinetic
jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.
14. Cyclotron
Cyclotron is a simple jQuery plugin for dragging 360° panoramas (cylindrical projection) and other seamlessly looping images around.
15. 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 either their parent or the window, a debugger, and the ability to customize your own kinetic easing functions.
16. Full Calendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event) .
17. JS Plumb
jsPlumb is a jQuery plugin for visually connecting HTML elements on a web page. It uses a HTML5 canvas element when supported and Google’s ExplorerCanvas script to support older browsers. The styles, shapes of the wires and “the position of the connection” can be customized easily. jsPlumb also supports drag’n drops (requires jQuery UI for this functionality).
18. Gridlist
GridList is a drag and drop library for a two-dimensional resizable and responsive list of items. An agnostic GridList class that manages the two-dimensional positions from a list of items within a virtual matrix. A jQuery plugin built on top of the GridList class that translates the generic items positions into responsive DOM elements with drag and drop capabilities.
19. jQuery Ajax File Uploader
Query plugin to drag and drop files, including ajax upload andprogress bar. The idea for this plugin is to keep it very simple. Basic javascript / jQuery knowledge is necesary to use this plugin.
20. Dropzone.js
Dropzone.js is a light weight JavaScript library for jQuery that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. It supports image previews and shows nice progress bars.
