Best jQuery Drag & Drop Plugins & Tutorials with Demo

    iPicture : A jQuery Plugin For Tooltip your Images With Demo

    iPicture : A jQuery Plugin For Tooltip your Images With Demo

    iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images.

    Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.

    Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.

    jQuery List DragSort with Demo

    jQuery List DragSort with Demo

    A javascript file that provides the ability to sort lists using drag and drop. Built on the jQuery framework. The CSS selector  of the element inside the list item to act as the drag handle. The default is the list item itself e.g. LI.The css selector of the list items that are moveable. Will only match elements that are immediate children of list container.The css selector of the element you want to scroll (i.e. div with overflow set to auto) when the list item is dragged outside the list.

    Hammer.js : A jQuery library for multi touch gestures with Demo

    Hammer.js : A jQuery library for multi touch gestures with Demo

    Hammer.js is a javascript library (that depends on jQuery) that can be used to control gestures on touch devices.Hammer.js has been tested on iPad1 with iOS5, iPhone4 with iOS5, Samsung Galaxy S with Android 2.3.3 and Google Chrome 17. On a desktop browser the mouse can be used to simulate touch events with one finger. It supports the following gestures:

    • Tap
    • Double tap
    • Hold
    • Drag
    • Transform

    Advanced jQuery Tooltip Plugin – qTip2

    Advanced jQuery Tooltip Plugin – qTip2

    This plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag ‘n’ dropped and animated items) or mouse.

    Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

    It has built-in Ajax integration and can load any remote data. qTip2’s website has lots of creative demos including 3rd part service and various popular plugin integrations.

    jQuery File Upload

    jQuery File Upload

    File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery.Supports cross-domain, chunked and resumable file uploads.
    Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

    EasyDrag jQuery Plugin

    EasyDrag jQuery Plugin

    I’m currently a little busy with some projects. In one of these projects I had to add a drag-and-drop behavior to some DOM elements, and for that I have created the EasyDrag jQuery plug-in that I’ll share with you now.

    Its main purpose is to add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events, which permits you to extend the basic functionality to whatever you need.

    jQuery Mapz

    jQuery Mapz

    With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.This plugin lets you create draggable image maps.

    Features

    • Draggable map which means there are no image dimension limits.
    • Zooming, no limit on the number of zooming levels.
    • Zoom by arrow keys or by mousewheel (note: when using zoom by mousewheel, you’ll need Brandon Aaron’s mousewheel plugin)
    • Use HTML <map> elements to create links inside your image maps. Let the plugin create multiple image maps for the different zooming levels.

    jQuery: Customizable layout using drag and drop

    jQuery: Customizable layout using drag and drop

    An easy to use and useful jQuery plugin helps create create a customizable website layout using drag and drop with features like saving preference using cookies.The plugins uses jQuery along with the jQuery UI Sortable plugin for drag and drop functionality and the jQuery Cookie plugin for storing item positions

    jqDnR – Minimalistic jQuery Drag’n’Resize

    jqDnR – Minimalistic jQuery Drag’n'Resize

    jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. jqDnR provides the all the basic elastic functionality most dialogs will need. Basic and simple and easy to use.

    Features:

    • Drag + Drop Element Posistioning
    • South East Resizing
    • Definable Drag and Resize “handles”
    • Translucent Dragging, Preservation of Original Opacity

    Create a Windows-like Interface with jQuery UI

    Create a Windows-like Interface with jQuery UI

    In this tutorial, we’ll be learning how to utilize jQuery UI to create a highly-functional user interface without using anything else. By the end, you should be familiar with jQuery UI, some of its components, and basic understanding of jQuery UI customization. Ultimately, we’ll be building a user interface akin to windows, with dialog boxes that are draggable, resizable, minimizable and maximizable.