jQuery Drag and Drop v4

by amindunited

HTML

<div class="targetWrap clearfix">
    <ul class="targetList">
        <li>Object One</li>
        <li>Object Two</li>
        <li>Object Three</li>
        <li>Object Four</li>
        <li>Object Five</li>
        <li>Object Six</li>
        <li>Object Seven</li>
        <li>Object Eight</li>
    </ul>
</div>

<div class="sourcesWrap clearfix">
    <ul class="sourcesList">
        <li>Object One</li>
        <li>Object Two</li>
        <li>Object Three</li>
        <li>Object Four</li>
        <li>Object Five</li>
        <li>Object Six</li>
        <li>Object Seven</li>
        <li>Object Eight</li>
    </ul>
</div>

CSS

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.targetWrap, .sourcesWrap {
    border:solid 1px gray;
    width: 924px;
    
}
.targetWrap .targetList {
    
}
.targetWrap .targetList > li, .sourcesWrap .sourcesList > li {
    width: 122px;
    height: 30px;
    line-height: 30px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #e8e8e8;
    display: inline-block;
    float: left;
    margin:1px;
}

JavaScript

(function($){
    var options = {
        targets:".shoppingCart, .wishList, .trash",//The destinations for dropping
        clone : true,//Boolean, Copy items from the source list or cut them
        container:true,// confine the drag area to the dragObjectParent -- UNUSED (always true)
        opacity: 1,//The opacity of the object while being dragged
        zIndex : 999,//The z-index of the object while being dragged
        layout: "vertical",//The direction of the list -- UNUSED
        tolerance: {x:75, y:15},//How close in x y the mouseMust be to trigger dropReady
        maxItemsToTarget:6,//The maximum number of elements allowed in a target ( 0 == inf)  
        targetDropReadyClass:'dropReady',//The class name added to targets when hovered and ready
        targetChildHoverClass:'dragHover',//The class assigned to potential siblings when hovered
        dragObjectParent: 'body',//jQuery Selector where the drag object will be placed
        dragObjectClass:'dragObj',//The class name assigned to the drag object
        dragObjectDropReadyClass:'dropReady',//The class name added to dragged elements when ready to drop,
        fixedItemsClass:'reserved',//The class name of target items that cannot be moved
        hiddenClass:'hidden',//The class name added to any elements that are hidden durring action
        spacerClass: "spacer",//The className that will be added to placeholders
        cloneCSS:true,//Boolean copy ALL relavent css for the drag item (pretty heavy)
        insertBefore: true,//boolean Items can be dropped in front of other items in the list order
        insertAfter: false,//boolean Items can be dropped after other items in the list order
        dropSuccess : function(){},//A function to call after a successful drop 
        dropFail : function(){}//A function to call after an unsuccessful drop
    }
    var vars = {
        org:null,//The Original Element (set by mousedown)
        dragObj:null,//The Element (clone) that is being...