Best jQuery Drag & Drop Plugins & Tutorials with Demo

    Redactor : Fantastic WYSIWYG-editor on jQuery

    Redactor : Fantastic WYSIWYG-editor on jQuery

    You must have noticed – a stylish editor. He looks equally well in any interface on any website. Are we wanting more, if the editor is already falling in love with his chosen interface?Inside you will find a clear, logical code. A good API. Customization available. All the tools to customize the editor for their needs. Be careful, your imagination can go a long way.

    Drag a file from your computer out the window and insert a file, it immediately appears as a link directly to the text.Just drag the window and your image will already be in the editor.Clicking on any image editor, you can easily configure whether text wrap around the picture on the right or left.

    elFinder : jQuery File manager for web

    elFinder : jQuery File manager for web

    elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

    Features:

    • All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
    • High performance server beckend and light client UI
    • Local file system, MySQL, FTP volume storage drivers
    • Background file upload with Drag & Drop HTML5 support
    • Standard methods of file/group selection using mouse or keyboard
    • Move/Copy files with Drag & Drop
    • Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
    • Quicklook, preview for common file types
    • “Places” for your favorites
    • Calculate directory sizes
    • Thumbnails for image files
    • Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
    • Flexible configuration of access rights, upload file types, user interface and other
    • Simple client-server API based on JSON

    iGoogle-like Drag & Drop Portal

    iGoogle-like Drag & Drop Portal

    An iGoogle like drag and drop portal based on Prototype and Scriptaculou.

    QapTcha : jQuery captcha system by drag&drop action

    QapTcha : jQuery captcha system by drag&drop action

    QapTcha is a draggable jQuery captcha system with jQuery UI.QapTcha is an easy-to-use, simple and intuitive captcha system.It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.

    Drag and Drop table content with JavaScript

    Drag and Drop table content with JavaScript

    Content of HTML table cells can be dragged to another table cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn’t fire events to the elements beneath the dragged object.

    DragToShirt : jQuery plugin that turn Web page into a t-shirt shop

    DragToShirt : jQuery plugin that turn Web page into a t-shirt shop

    DragToShirt is a jQuery plugin that allows you to easily turn a web page into a t-shirt shop. It uses the Spreadshirt api, and allows your visitors to drag images from your site onto t-shirts to generate a product that they can then buy. This is very convenient if you have, for example, an online gallery and you want to make money by making commissions from t-shirt sales. It’s designed to be easy to use, customizable, and not require any changes to your current web page design.

    bsmSelect : Better jQuery Select Multiple with Demo

    bsmSelect : Better jQuery Select Multiple with Demo

    A progressive enhancement to select multiple form elements using jQuery that makes it much easier to use. This enhancement automatically hides the original select multiple, and instead presents a regular select showing the available options, and an HTML list showing the already-selected options. While hidden, the original select multiple is updated as the user makes changes.

    No Ctrl/Cmd-Clicking is necessary to select multiple items, and an accidental click is not destructive. You add or remove items one at a time. Only the already-selected items occupy screen real estate, as they should. A remove link is included with each selected item, which eliminates ambiguity. Viewing and choosing a new item to add requires clicking on the select. This action is inherently more familiar, and displays many more available options at once, than a select multiple. More is seen at a glance and less scrolling (if any) is required to see all available options.Optionally, this type of select is sortable, giving it hierarchy. The user can drag and drop the items to the desired order.

    Pep.jQuery.js : jQuery kinetic-drag on mobile/desktop plugin with Demo

    Pep.jQuery.js : jQuery kinetic-drag on mobile/desktop plugin with Demo

    Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.

    Pep has built-in support for custom start, stop, rest (called when easing completes), and drag events, constraining objects to either their parent or the window, a debugger, and the ability to customize your own kinetic easing functions.

    inflickity : jQuery Never-ending drag n’ flick content with Demo

    inflickity : jQuery Never-ending drag n' flick content with Demo

    inflickity is a jQuery Never-ending drag n’ flick content.

    Dragdealer JS : JavaScript 2D drag and Tap Plugin with Demo

    Dragdealer JS : JavaScript 2D drag and Tap Plugin with Demo

    Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency.