Learning jQuery

jQuery allows users to add draggable functionality to any DOM element. With Drag and Drop jQuery Plugins allow you to move any particular draggable object with the click of a mouse and drag it anywhere within the page.

For this roundup, we have compiled a list of 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. Dropper

Dropper is a jQuery plugin for simple drag and drop uploads.

2. Fancy Product Designer

You can use this plugin for any type of product. Use it as T-Shirt Designer, Business Card Designer, Device Designer….no limits! You do not need any vectors 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 its can be colorized, the image will be converted in a HTML5 canvas element.

3. Dragdealer

Dragdealer is a drag-based JavaScript component that can be used as a slider content scroller, image carousel and much more.

4. jQuery Ajax File Uploader

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

5. jDashboard

jDashboard is a jQuery Plugin that 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. In live preview, you may need to remove the frame(top left link) for the cookies to work.

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 draggingand dropping with multi-select. Fields themselves can be simple HTML elements or more complex containers.

7. File API

FileAPI is a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.

8. Fancytree

Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading.

9. Gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids.

10. Zoomer

Zoomer! is the definitive 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. The powerful jQuery library makes this component cross-platform.

11. jqTree

jqTree is a jQuery tree plugin with many options and functions. Also it has drag & drop support for tree nodes.

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

13. Gridster.js

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

14. Cyclotron

Cyclotron is a simple jQuery plugin for dragging 360° panoramas (cylindrical projection) and other seamlessly looping images around.

15. Onebyone Slider

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven byAnimate.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.

16. JS Tree

jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin. jsTree is absolutely free.

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

18. Table DND

TableDnD is a jQuery plugin that simply adds drag & dropfunctionality 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.

19. jQuery Kinetic

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.

20. Azexo Composer

Azexo Composer is JavaScript library for user friendly front-end content editing of HTML pages. It is based on jQuery, jQuery UI, Underscore and Bootstrap. Azexo Composer uses client JS for render of HTML to work faster and save server resources.

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

22. HTML5 Sortable

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.

23. 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.
http://widgets.better2web.com/loader/

24. jQuery Drag Expose

It Shows your photos in a different way! Let the user drag & drop them to slide the gallery! If you prefer, auto-sliding and two arrow buttons can facilitate your gallery slideshow.

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

26. Nestable

Nestable is an interactive hierarchical list. You can drag & drop to rearrange the order. It even works well on touch-screens.

27. jQuery Dragmove

jQuery.dragmove is a lightweight jQuery extension for enabling draggable functionality on DOM elements without requiring the jQuery UI library. Compatible with trackpads, touch devices, and standard computer mice.

28. Dynatree

Dynatree is a dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.

29. Interact.js

Interact.js is a powerful, flexible, snappable drag and drop, resizing and multi-touch gestures for modern browsers (and also IE8+).

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