Best jQuery Drag & Drop Plugins & Tutorials with Demo

    HTML5 Music Player with File Reader & Audio APIs

    HTML5 Music Player with File Reader & Audio APIs

    This time we want to share with you a cool experiment that we made. It is a music player that lives in your browser. It uses the powerful HTML5 File Reader and Audio APIs. As a result, you can just drag and drop mp3 files from your computer into the browser, and they are automatically added to your playlist.

    jstree : jQuery Interactive Trees Plugin

    jstree : jQuery Interactive Trees Plugin

    jsTree is jquery plugin, that provides interactive trees.jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.

    • drag & drop support
    • keyboard navigation
    • inline edit, create and delete
    • tri-state checkboxes
    • fuzzy searching
    • customizable node types

    vSort : jQuery Lists Sortable Plugin with Handle

    vSort : jQuery Lists Sortable Plugin with Handle

    vSort is a simple jQuery plugin for making lists sortable with a handle

    • less than 1.4kB including css
    • Tested in IE8, FireFox, Chrome

    Linking : jQuery plugin to link Graphically elements

    Linking : jQuery plugin to link Graphically elements

    jQuery.linking is a jQuery plugin designed for linking graphically webpage elements in a simple way.

    Drag and Drop Newsletter Builder using jQuery

    Drag and Drop Newsletter Builder using jQuery

    In this tutorial i will teach you how to create a drag and drop interface for a newsletter builder using jQuery. You will be able to create your own template and import it in the builder because i have designed the builder to work with various templates not just the one in the example. I will explain to you how you can insert your own template at the end of this tutorial.

    KCFinder : Web file manager with PHP & HTML5

    KCFinder : Web file manager with PHP & HTML5

    KCFinder is free open-source replacement of CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded into an editor’s generated HTML content.

    Features:

    • Ajax engine with JSON responses
    • Multiple files upload
    • Upload files using HTML5 drag and drop from local file manager
    • Drag and drop images from external HTML pages. Multiple images can be dropped using selection (Firefox only)
    • Download multiple files or a folder as single ZIP file
    • Select multiple files with the Ctrl/Command key
    • Clipboard for copying, moving and downloading multiple files
    • Easy to integrate and configure in web applications

    Packery : Bin-packing layout library

    Packery : Bin-packing layout library

    Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

    Dragon : jQuery Draggable plugin

    Dragon : jQuery Draggable plugin

    Another fn.draggable plugin for jQuery. This plugin is independant of any widget or core architecture, just plop it on your page after jQuery and you’re good to go.

    Architect : Site and HTML builder with JS & PHP

    Architect : Site and HTML builder with JS & PHP

    Architect is the most powerful and easy to use site and html builder not only on codecanyon, but probably on the internet as well. It has all the features you would except from a site builder, while also offering exclusive ones like themes & templates, closely integrated code editors, the best visual css and image editor around and much more.

    Uber Zoom : jQuery Smooth Zoom & Pan

    Uber Zoom : jQuery Smooth Zoom & Pan

    Next-gen smooth zoom & pan for your photos and images.Uber Zoom uses many features that you would normally find in a native iOS or Android app to improve the user experience, like rubberbanding and intertia.

    If you need to have a small preview of your image in the bottom left corner, you can enable that. The user will see a small window to navigate your image by dragging.