30 jQuery Drag and Drop Plugins for Developers
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.
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.
4. jQuery Ajax File Uploader
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.
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
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.
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.
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
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
20. Azexo Composer
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.
24. jQuery Drag Expose
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.
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.
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.