Best jQuery Drag & Drop Plugins & Tutorials with Demo

    SnapPuzzle : jQuery Image Puzzle Game

    SnapPuzzle : jQuery Image Puzzle Game

    A jQuery plugin for turning an image into a jigsaw puzzle game.

    • Adjustable difficulty level
    • May be used in responsive designs
    • Drag and drop
    • Callbacks

    Architect Lite : Front-End HTML Builder

    Architect Lite : Front-End HTML Builder

    Architect Lite is a javascript application that allows users to build custom HTML designs via drag and drop with no coding knowledge. It is perfect for bundling with your template on themeforest or integrating into your existing projects.

    Playful Interaction for Draggable Elements

    Playful Interaction for Draggable Elements

    A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.

    HTML5 Sortable : jQuery Sortable Lists and Grids

    HTML5 Sortable : jQuery Sortable Lists and Grids

    Lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

    • Less than 1KB (minified and gzipped).
    • Built using native HTML5 drag and drop API.
    • Supports both list and grid style layouts.
    • Supported Browsers: Current versions of all major browsers (Chrome, Firefox, Safari, Opera), IE9+.
    • Supports exports as AMD, CommonJS or global.

    jQuery Sortable Tree Lists

    jQuery Sortable Tree Lists

    jQuery plugin to sorting lists also the tree structures. Smooth motion while dragging and scrolling.

    Dad.js : jQuery Drag & Drop Plugin

    Dad.js : jQuery Drag & Drop Plugin

    DAD.js is a simple and awesome Drag And Drop plugin.

    Dragtable : jQuery Drag-Drop Table Columns Plugin

    Dragtable : jQuery Drag-Drop Table Columns Plugin

    Dragtable  is a jQuery plugin for re-order table columns by using drag’n’drop.

    Interactive Drag and Drop Coloring Concept

    Interactive Drag and Drop Coloring Concept

    Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

    SVG Connectable.js : JavaScript library for connecting SVG

    SVG Connectable.js : JavaScript library for connecting SVG

    A JavaScript library for connecting SVG things.

    Drag N’ Drop Form-builder for PHP

    Drag N' Drop Form-builder for PHP

    The Drag N’ Drop form builder provides an easy to use tool for creating an almost infinite configurations for end-user forms. Using the simplicity of drag-and-drop and user experience patterns available in most integrated development environments, you can customize forms in several ways.

     

    • Choose from 11 different draggable fields to create your form
    • Create custom themes easily
    • File-upload control with Amazon S3 cloud integration
    • Export registrant list to an excel spreadsheet
    • Customize required field validation
    • Add tooltips as a help-resource
    • Real-time updating