jQuery Drag and Drop v4

by amindunited

HTML

<div class="productsWrap clearfix">
    <div class="sectionLabel"> Products </div>
    <ul>
        <li>1 - HDMI Cable</li>
        <li>2 - DVI Cable</li>
        <li>3 - USB 3 Cable</li>
        <li>4 - Thunderbolt Cable</li>
        <li>5 - Micro USB Cable</li>
        <li class="reserved">6 - VGA Cable</li>
    </ul>
</div>
<div class="shoppingCart clearfix">
    <div class="sectionLabel"> Cart </div>
    <ul>
        <li>LuxBet Reserved</li>
        <li>LuxBet Reserved</li>
        <li>LuxBet Reserved</li>
    </ul>
</div>
<div class="wishList clearfix">
    <div class="sectionLabel"> Wish List</div>
    <ul>
        <li>LuxBet Reserved</li>
        <li>LuxBet Reserved</li></ul>
</div>
<div class="trash clearfix">
    <div class="sectionLabel"> Rubbish </div>
    <ul>
        <li>LuxBet Reserved</li></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;
}
.spacer {
    height: 10px;
    width:10px;
    opactiy:0.1;
}

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 dragged
		mouseDownX:0, //The Global X postion of the mousedown event
		mouseDownY:0, //The Global Y postion of the mousedown...