jQuery Drag and Drop v3

HTML

<div class="productsWrap clearfix">
    <div class="sectionLabel"> Products </div>
    <ul>
        <li>HDMI Cable</li>
        <li>DVI Cable</li>
        <li>USB 3 Cable</li>
        <li>Thunderbolt Cable</li>
        <li>Micro USB Cable</li>
        <li>VGA Cable</li>
    </ul>
</div>
<div class="shoppingCart clearfix">
    <div class="sectionLabel"> Cart </div>
    <ul>
        <li>HDMI Cable</li>
        <li>DVI Cable</li>
        <li>USB 3 Cable</li>
        <li>Thunderbolt Cable</li>
        <li>Micro USB Cable</li>
        <li>VGA Cable</li>
    </ul>
</div>
<div class="wishList clearfix">
    <div class="sectionLabel"> Wish List</div>
    <ul></ul>
</div>
<div class="trash clearfix">
    <div class="sectionLabel"> Rubbish </div>
    <ul></ul>
</div>

CSS

.clearfix:after { clear:both; content: '.'; display:block; height: 0px; visibility:hidden; }
.productsWrap, .shoppingCart, .wishList, .trash {
    position: relative;
    width: 300px;
    min-height: 100px;
    border: inset 1px #8a8a8a;
    border-radius: 5px;
    margin:5px;
    /*padding:5px;*/
}
.productsWrap {
    float:left;
}
.productsWrap li, .shoppingCart li, .wishList li, .trash li {
    background-color: #AFD0DB;
    border: inset 1px #8a8a8a;
    border-radius: 5px;
    padding-left: 5px;
    margin:5px;
    cursor:pointer;
}
.shoppingCart, .wishList, .trash {
    float: right;
    clear: right;
}
.sectionLabel {
    position: absolute;
    width: 100%;
    text-align:center;
    color: gray;
    top: 50px;
    left: 0px;
}
.dropReady {
    background-color: #ededed;
    border: solid 1px #000077;
}
.shoppingCart .dragHover{
   background-color:pink;
}

JavaScript

(function($){
    var options = {
        targets:".shoppingCart, .wishList, .trash",
        clone : true,
        container:false,
        opacity: 1,//
        zIndex : 999,
        tolerance: {x:75, y:5},
        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
        spacerClass: "spacer",
        cloneCSS:true,
    }
    var vars = {
        org:null,//The Original Element (set by mousedown)
        dragObj:null,//The Element (clone) that is being dragged
        mouseDownX :0,//The Global X postion of the mousedown event
        mouseDownY :0,//The Global Y postion of the mousedown event
        coords: {left:0, right:0, top:0, bottom:0},//Array to hold the current position
        currentTarget: null,//jQuery Object to hold the current focused target
        nearestSibs:[{x:null, y:null, obj:null}],
        hoverTimer: null
    }
        
    var methods = {
        init: function(){
            methods.addListeners.apply($(this));
        },
        addListeners : function(){
            $(options.targets).mouseenter(methods.targetMouseEnter);
            $(options.targets).mouseleave(methods.targetMouseLeave);
            $(this).each( function(i, obj){ $(obj).on('mousedown', methods.mouseDown) });
        },
        mouseDown: function(e){

            //$('.'+options.dragObjectClass).remove();
            if ( e.which != 1 ) {
                return $(this);
            }
            e.preventDefault();
            vars.org = $(this);
            vars.mouseDownX = e.offsetX;
            vars.mouseDownY = e.offsetY;
            vars.dragObj =...