10 Easy jQuery Drag and Drop Plugins

This post gives you 10 jQuery Drag and Drop Plugins (you may have not used before) that will give the poser to add Drag N’ Drop capabilities to your frontend. Take note though that some may still be beta/development or not fully maintained by the authors. Enjoy!

Related Posts:

18 jQuery Drag & Drop Plugins

Update 19/05/2013: Found a cool drag/drop/filter plugin called jQuery.Shapeshift.

1. Drag n Drop Scattered Gallery

Drag and drop gallery script with various look and feel options.

Source Demo

2. (mb)ImgNavigator

A photogallery for viewing very large images using a navigator map and drag. You can drag your large image in the display by the navigator or the image itself.

Source Demo

3. jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

Source + Demo

4. Ajax Upload; A file upload script with progress-bar, drag-and-drop

This plugin uses XHR for uploading multiple files with progress-bar.

Source + Demo

5. Drop n’ Save – Drag & Drop Uploader

This unique drop and save application allows you to add this facility to your website, today and with minimum hassle.

Source Demo

6. (mb)ConteinersPlus

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsible and minimizable

Source Demo

7. jQuery Drag Expose | Draggable Image Gallery

Show your photos in a different way – Let the user drag & drop them to slide the gallery!

Source

Demo

8. Dynamic Drag’n Drop With jQuery And PHP

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI

Source Demo

9. Collidable Draggables

Adds collision detection to draggable objects.

Source + Demo

10. NestedSortable

Is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop.

Source Demo

Frequently Asked Questions about jQuery Drag & Drop Plugins

What are the key features to look for in a jQuery drag and drop plugin?

When choosing a jQuery drag and drop plugin, there are several key features to consider. Firstly, the plugin should be easy to use and integrate into your existing code. It should also be compatible with various browsers and devices. Secondly, the plugin should offer a high level of customization, allowing you to adjust the look and feel to match your website or application. Lastly, the plugin should be well-documented with a supportive community, which can be a lifesaver when you encounter issues or need help with implementation.

How can I make my jQuery drag and drop plugin mobile-friendly?

To make your jQuery drag and drop plugin mobile-friendly, you need to ensure that it supports touch events. Some plugins come with built-in touch support, while others may require additional libraries like jQuery UI Touch Punch. It’s also important to consider the size of draggable elements on smaller screens and adjust them accordingly to provide a good user experience.

How can I customize the appearance of my draggable elements?

Most jQuery drag and drop plugins allow you to customize the appearance of draggable elements using CSS. You can change the size, color, border, and other properties of the elements. Some plugins also provide options to add classes to the elements when they are being dragged or dropped, which can be used to apply different styles.

How can I restrict the movement of draggable elements?

You can restrict the movement of draggable elements by setting the containment option in the plugin. This option can be set to a specific element, the parent element, or the window. When set, the draggable elements will not be able to move outside the specified containment area.

How can I handle drop events in jQuery drag and drop plugins?

jQuery drag and drop plugins provide events that you can listen to and handle in your code. The drop event is triggered when a draggable element is dropped on a droppable element. You can use this event to perform actions like updating the database, changing the appearance of elements, or displaying a message to the user.

How can I make multiple elements draggable?

To make multiple elements draggable, you can use a class selector or a multiple selector in the draggable method. All elements that match the selector will become draggable. You can also use the ‘add’ method to add more elements to the set of draggable elements at any time.

How can I make a draggable element snap to other elements or grid?

Some jQuery drag and drop plugins provide options to make draggable elements snap to other elements or a grid. The snap option can be set to true to enable snapping, and the snapMode and snapTolerance options can be used to control the snapping behavior.

How can I revert the position of draggable elements?

You can revert the position of draggable elements by setting the revert option in the plugin. When set to true, the elements will return to their original position when they are not dropped on a droppable element. You can also use the revertDuration option to control the speed of the revert animation.

How can I disable or enable dragging dynamically?

You can disable or enable dragging dynamically using the ‘disable’ and ‘enable’ methods provided by the plugin. When the ‘disable’ method is called, the elements will no longer be draggable until the ‘enable’ method is called.

How can I handle errors and exceptions in jQuery drag and drop plugins?

Handling errors and exceptions in jQuery drag and drop plugins can be done by listening to the ‘start’, ‘drag’, and ‘stop’ events and checking for any errors or exceptions. If an error or exception occurs, you can display a message to the user or log the error for debugging purposes.