jQuery Drag and Drop

by amindunited

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></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;
}

JavaScript

//SOF copyCSS
(function($){
    $.fn.copyCSS = function (source) {
        var dom = $(source).get(0);
        var dest = {};
        var style, prop;
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                    return b.toUpperCase();
            };
            if (style = window.getComputedStyle(dom, null)) {
                var camel, val;
                if (style.length) {
                    for (var i = 0, l = style.length; i < l; i++) {
                        prop = style[i];
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop);
                        dest[camel] = val;
                    }
                } else {
                    for (prop in style) {
                        camel = prop.replace(/\-([a-z])/, camelize);
                        val = style.getPropertyValue(prop) || style[prop];
                        dest[camel] = val;
                    }
                }
                return this.css(dest);
            }
        }
        if (style = dom.currentStyle) {
            for (prop in style) {
                dest[prop] = style[prop];
            }
            return this.css(dest);
        }
        if (style = dom.style) {
            for (prop in style) {
                if (typeof style[prop] != 'function') {
                    dest[prop] = style[prop];
                }
            }
        }
        return this.css(dest);
    };
})(jQuery);
//EOF copyCSS



(function($){
    var org;
    var settings = {
        targets:".shoppingCart, .wishList, .trash",
        clone : true,
        container:false,
        opacity: 1,
        zIndex : 999
    }

    var methods = {
        init : function(){
            var dragObj;
            var mouseDownX = 0;
            var mouseDownY = 0;
            //var targets = ".shoppingCart, .wishList, .trash";
            
           ...