10 jQuery Drag and Drops

10 awesome jQuery Drag and Drop plugins. Want to become an expert in drag and drop feature? Then look no further – these tutorials are for you! Most of these plugins are written in jQuery, and they are super easy to customize and implement in your own projects in a matter of minutes.

Update: There are 18 more drag and drop plugins here


1. jQuery Iviewer

jQuery.iviewer is a jQuery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.
jQuery-Iviewer-.jpg
Source


2. Dragscrollable

Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging.
Dragscrollable.jpg
Source


3. Nettuts Drag and Drop

In this tutorial, I’ll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications.
Nettuts-Drag-and-Drop-.jpg
Source


4. EasyDrag jQuery Plugin

It’s very simple, first you call the easydrag() method as in the old version and then you call the setHandler() method passing to it the id of the element that will act as the handle. The handle MUST be a child element of the content that will be dragged.
EasyDrag-jQuery-Plugin-.jpg
Source


5. How to create a Simple Drag and Drop with jQuery

Here is a quick tutorial to help you get up and running with jQuery drag and drop.
How-to-create-a-Simple-Drag-and-Drop-with-jQuery-.jpg
Source


6. Drag & Drop with PHP & jQuery

The ability to drag and drop content on a page and have it save the order can make for a great user interface and is actually relatively easy to execute with a few lines of jQuery
Drag-Drop-with-PHP-jQuery-.jpg
Source


7. Drag and Drop with Persistence using JQuery

In this tutorial, we will focus on how to create a similar drag and drop functionality to add users to a room.
Drag-and-Drop-with-Persistence-using-JQuery-.jpg
Source


8. A more elaborated jQuery Drag & Drop (with cloning)

Learn drag and drop with cloning using jQuery.
A-more-elaborated-jQuery-Drag-Drop-with-cloning-.jpg
Source


9. Drag and Drop Buttons

Learn how to create Drag and Drop type Buttons.
Drag-and-Drop-Buttons-.jpg
Source


10. Inserting text with Drag n’ Drop

In this we will learn how to insert text with drag and drop using jQuery.
Inserting-text-with-Drag-n’-Drop-.jpg
Source