jQuery: dragdrop

more at: http://hacks.mozilla.org helpers: https://gist.github.com/1223979 http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/ http://dev.iceburg.net/jquery/jqDnR/ https://github.com/tbrd/jquery.dragndrop https://github.com/mikeplate/jquery-drag-drop-plugin https://github.com/fimble/jquery.event.drag-drop https://github.com/pozs/jQuery-dnd

HTML

<div class="drag"></div>

<div id="drop" class="drop">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</div>

CSS

.drag{position:absolute; float:left; width:100px; height:100px; background:indigo; z-index:1}

#drop {
    width: 200px;
    height: 200px;
    position: relative;
    background: #eee;
    border: 1px solid #999;
    margin: 0 auto;
}

#drop div {
    width: 100px;
    height: 100px;
    float: left;
}

#drop .a {
    border-right: 1px solid #ccc;
    width: 99px;
}


#drop .c {
    border-right: 1px solid #ccc;
    width: 99px;
    height: 99px;
    border-top: 1px solid #ccc;
}

#drop .d {
    border-top: 1px solid #ccc;
    height: 99px;
}

JavaScript

;(function($, window, document, undefined) {
    'use strict';

    var pluginName = 'dragdrop',
        defaults = {
            // which direction to drag - ["both", "x", "y"], default: "both"
            axis: "both",

            // Drag a clone of the source, and not the actual source element
            makeClone: false,

            // Class to apply to source element when dragging a clone of the source element
            sourceClass: null,

            // Specify with true that the source element should hade visibility:hidden while dragging a clone
            sourceHide: false,

            // Class to apply to the element that is dragged
            dragClass: null,

            // Class to apply to the dragged element when dropping is possible
            canDropClass: null,

            dropClass: null,

            isActive: true,

            // if set, dragging is limited to this container
            container: null,

            // Default is to allow all elements to be dragged
            canDrag: function($src, event) {
                return $src;
            },

            // Default is to allow dropping inside elements with css stylesheet "drop"
            canDrop: function($dst) {
                return $dst.hasClass("drop") || $dst.parents(".drop").length > 0;
            },

            // Default is to move the element in the DOM and insert it into the element where it is dropped
            didDrop: function($src, $dst) {
                $src.appendTo($dst);
            }
        },
        settingsKey = pluginName + '-settings';

    // Status during a drag-and-drop operation. Only one such operation can be in progress at any given time.
    var $sourceElement = null,
        // Element that user wanted to drag
        $activeElement = null,
        // Element that is shown moving around during drag operation
        $destElement = null,
        // Element currently highlighted as possible drop destination
        dragOffsetX,...