Best jQuery Drag & Drop Plugins & Tutorials with Demo

    Picture Cut : jQuery plugin that Upload Drag & Crop Image

    Picture Cut : jQuery plugin that Upload Drag & Crop Image

    Picture cut is a jquery plugin that handles images in a very friendly and simple way, with a beautiful interface based on bootstrap or jquery ui, has great features like ajax upload, drag image from explorer, image crop and others.

    Features:

    • Ajax Upload
    • Resize image
    • Drag image from explorer
    • Manipulate image size in bytes
    • Cropping image

    Simone : jQuery Window Manager Plugin

    Simone : jQuery Window Manager Plugin

    Simone is a JavaScript window manager consisting of two widgets: taskbar and window, providing a desktop-like experience. It’s especially useful for single-page applications. It’s built on top of the jQuery and jQuery UI.

    Features:

    • Easy start for developers. API known from jQuery UI.
    • jQuery UI Themes compatible with no additional setup.
    • Customizable with options, events and methods.
    • Built-in debugger.
    • Utilizies well-known patterns, present in other window managers.
    • Comes with localization support nad multilingual capabilities.
    • Widgets are to a point aware of each other.
    • Content-agnostic windows.
    • Software in active development.

    HTML 5 Upload Image, Ratio with Drag and Drop

    HTML 5 Upload Image, Ratio with Drag and Drop

    A HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop makes this tool ideal for use in a CMS.

    Features:

    • uses canvas to crop the image, no server scripts needed!
    • want to use a server script, no problem! simple change it with additional options
    • full HTML5 support
    • save your image with AJAX or use the tradional FORM input file element
    • uses ratio to let it fit your screen or element
    • easy to use
    • additional options to configure
    • bootstrap 3.1
    • jQuery

    Guillotine : jQuery Image Crop Zoom Rotate Plugin

    Guillotine : jQuery Image Crop Zoom Rotate Plugin

    Guillotine is a jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

    • Responsive: The window (or selection area) is fully responsive (fluid).
    • Touch support: Dragging the image also works on touch devices.

    Draggable Metro App Showcase with CSS3

    Draggable Metro App Showcase with CSS3

    Today I’d like to share with you an interactive and touch-optimized metro app showcase concept for showcasing a metro (probably a Windows Phone) app screenshot. The screenshot will be draggable and swipable, and you’ll have a couple of extra options to view how the app would look like in a mobile phone frame.

    Collections : Drag and Drop jQuery collection Add-on

    Collections : Drag and Drop jQuery collection Add-on

    Drag and Drop jquery collection add-on for ecommerce site.

    HTML Builder with jQuery & Bootstrap

    HTML Builder with jQuery & Bootstrap

    HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

    Features:

    • build custom HTML pages using predefined HTML elements
    • create your own custom HTML elements with ease
    • integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)
    • create multiple pages in one session
    • export the created pages (incl CSS, Javascript and images)
    • basic editing of written content (only available for non IE browsers)

    Drag and drop form builder using bootstrap

    Drag and drop form builder using bootstrap

    I was working on a web survey type of project with a requirement that admin users should be able to build forms on the go, which will then be displayed to user to fill up and submit. while browsing i came across this nice script Formbuilder.

    drag and drop form builder is simply a interface to build your own web forms, On each move it generates json output which you can use to rebuild the html form at run time.

    Slip.js : UI library for manipulating lists via Swipe and Drag gestures

    Slip.js : UI library for manipulating lists via Swipe and Drag gestures

    A tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies.Supports iOS Safari, Firefox Mobile, Chrome Mobile, Opera Mobile (Presto and Blink).

    Draggable Dual-View Slideshow with JavaScript

    Draggable Dual-View Slideshow with JavaScript

    An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. The main idea is to translate the slider on the Z axis, allowing it to be either fullscreen or of a smaller carousel size. By switching the actual size of the slideshow and removing the transforms when they are not needed anymore, we allow the slideshow to have a “real” size (i.e. 25% of the window). For the content part, we slide everything up and reveal a scrollable area.