Best jQuery Drag & Drop Plugins & Tutorials with Demo

    gridster.js : jQuery plugin for building intuitive draggable layouts

    gridster.js : jQuery plugin for building intuitive draggable layouts

    Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

    Easybox : lightbox clone for jQuery

    Easybox : lightbox clone for jQuery

    EasyBox is a lightbox clone based on the light-weight Slimbox2 script. It offers a variety of additional features such as:

    • displaying YouTube and Vimeo videos,
    • displaying inline content,
    • displaying iFrames and
    • better animations

    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    EaselJS is a library to make working with the Canvas element easier. It provides a display list to allow you to work with display elements on a canvas as nested objects. It also provides a simple framework for providing shape based mouse interactions on elements in the display list. This is useful for games, generative art, and other highly graphical experiences.

    EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

    Nestable jQuery Plugin

    Nestable jQuery Plugin

    Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens. If you’re familiar with the way WordPress allows the user to manage menus, this will be used for a similar UI.Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin).

    jQuery Image Scroller Plugin

    jQuery Image Scroller Plugin

    Building websites for PUMA has given me the opportunity to do some pretty cool stuff. The latest feature was dreamed up by Owen, and it turned out to be pretty easy to do with JavaScript.

    These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn’t fit the entire product in without shrinking the image down until it was too small. Owen’s solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.

    Collapsible Drag & Drop Panels Using jQuery

    Collapsible Drag & Drop Panels Using jQuery

    Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.

    Today, i am going to show you how to create collapsible, drag and drop panels easily using jQuery and jQuery UI libraries. Here’s what the final result will look like.

    jQuery.event.move : Drag event plugin

    jQuery.event.move : Drag event plugin

    Custom events ‘movestart’, ‘move’ and ‘moveend’ for jQuery.Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

    Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making responsive interfaces. That said, movestart, move and moveend events deliberately echo dragstart, drag and dragend events, with one significant difference: where the drag event fires continuously whether you have moved the pointer or not, the move event fires only after the pointer has been moved.

    dynoTable: A jQuery plugin for creating editable tables

    dynoTable: A jQuery plugin for creating editable tables

    I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product.

    DynoTable makes an html table editable. With it you can:

    • Add rows
    • Remove rows
    • Clone rows
    • Click and Drag to Re-arrange rows (If you have Jquery UI included on
      your page)

    The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number
    of properties and callback functions to configure it further if needed.

    nestedSortable jQuery plugin

    nestedSortable jQuery plugin

    nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.

    Features:

    • Designed to work seamlessly with the nested set model (have a look at the toArray method)
    • Items can be sorted in their own list, moved across the tree, or nested under other items.
    • Sublists are created and deleted on the fly
    • All jQuery Sortable options, events and methods are available
    • It is possible to define elements that will not accept a new nested item/list
    • It is possible to define a maximum depth for nested items

    jQuery.kinetic : Smooth Drag Scrolling

    jQuery.kinetic : Smooth Drag Scrolling

    jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.Add kinetic scrolling functionality to a container using mouse or touch devices.Drag a mouse or use touch gestures over the windows below to scroll the pane. If you let go with momentum the scrolling will slow gradually.