Best jQuery Drag & Drop Plugins & Tutorials with Demo

    Gridly : jQuery plugin to enable drag and drop & resizing on a grid

    Gridly : jQuery plugin to enable drag and drop & resizing on a grid

    Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the demo below try tapping or dragging any of the bricks.

    jQuery Horizontal Gridfolio Pro

    jQuery Horizontal Gridfolio Pro

    Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.

    Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.

    Features:

    • Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
    • Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
    • Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
    • Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).

    jQuery Draggable Background

    jQuery Draggable Background

    A jQuery plugin for draggable background images.Their are 3 types of different draggable effect with this plugin.

    Draggabilly : JavaScript Make that shiz draggable

    Draggabilly : JavaScript Make that shiz draggable

    Make that shiz draggable with this plugin.Rad because it supports IE8+ and multi-touch.

    dragend JS : jQuery plugin for content swiping

    dragend JS : jQuery plugin for content swiping

    dragend JS is a swipe plugin for jQuery. It’s open source and uses hammer.js for observing multi-touch gestures.

    Features:

    • horizontal and vertical swiping
    • mobile and desktop ready
    • lightweight (1.55KB gzipped)
    • keyboard navigation
    • fullscreen or boxed
    • contend scribe
    • resize adjustment
    • overscroll

    DROPAREA : jQuery Html5 drag-drop file uploader plugin

    DROPAREA : jQuery Html5 drag-drop file uploader plugin

    droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).

    Originally it has:

    • client-side image resizing with canvas on browser option
    • data url option for sending a file/image as a text field with ajax
    • click event for browsing files

    zTree : jQuery Tree Plugin

    zTree : jQuery Tree Plugin

    zTree is a multi-functional “tree plug-ins.” based on jQuery. The main advantages of zTree includes excellent performance, flexible configuration, and the combination of multiple functions.

    Features:

    • The code of zTree v3.x has been seperated according to the various functions. You can only load the code you need.
    • zTree v3.x uses delay loading technique, which can easily load tens of thousands of nodes in seconds even in IE6 browser.
    • Support for JSON data.
    • Support for static and asynchronous data loading node.
    • Replace the skin / custom icon flexibllly.
    • Support extremely flexible checkbox or radio selection function.
    • Flexible editing (add / delete / change / search) functions, such as drag and drop nodes,you can even drag and drop multiple nodes.
    • To enhance performance, zTree transforms the js & css structure to provide excellent browser compatibility and make the development more easily

    jQuery Horizontal Tree

    jQuery Horizontal Tree

    jQuery Horizontal Tree is a jQuery plugin for visualising data in a tree structure. This plugin supports add, edit, delete functionality with ajax and also supports drag and drop for re-organisation of nodes.

    A plugin that allows you to render structures with nested elements in a tree structure. To build the tree you need is to just make a single line call to the plugin and set parameter and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.

    jQWidgets : Powerful UI widgets for jQuery developers

    jQWidgets : Powerful UI widgets for jQuery developers

    jQWidgets is faster and easy-to-use JavaScript UI SDK based on the popular jQuery library.jQWidgets delivers everything you need to build rich client UI with JavaScript, HMTL5 and jQuery. It contains more than 30 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.

    jQWidgets is ready for a wide range of touch and mobile devices. The framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience. jQWidgets is not a modified version of the jQuery UI toolkit. All widgets are designed from ground-up and based on a powerful common core.jQWidgets is built with performance in mind. It is small in size, highly modular and extensible. Individual widgets and themes can be loaded on demand to further optimize the download time and save memory.

    Teamwork Gantt : jQuery Component For Gantt Charts & Task Trees

    Teamwork Gantt : jQuery Component For Gantt Charts & Task Trees

    Teamwork Gantt is a JavaScript component built on jQuery for creating Gantts, task trees, dependencies which exports the resulting data in JSON format.

    Features:

    • jquery based
    • MIT licensed: you can reuse everywhere
    • json import-export
    • internationalizable
    • manage task status –> project workflow
    • manage dependecies
    • manage assignements (resources, roles efforts)
    • server synchronization ready
    • full undo-redo support
    • cross browser (at least for recent versions)