Droppable and Sortable - ORDER/CART Example

by bizamajig

HTML

<div id="products">

<h1 class="ui-widget-header">Products</h1>

<div id="catalog">
    
<h2><a href="#">T-Shirts</a></h2>

    <div>
        <ul>
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
        </ul>
    </div>
    
<h2><a href="#">Bags</a></h2>

    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
    
<h2><a href="#">Gadgets</a></h2>

    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
</div>
<div id="cart">
    
<h1 class="ui-widget-header">Shopping Cart</h1>

    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>

CSS

h1 {
     padding: .2em;
     margin: 0;
 }
 #products {
     float:left;
     width: 500px;
     margin-right: 2em;
 }
 #cart {
     width: 200px;
     float: left;
     margin-top: 1em;
 }
 /* style the list to maximize the droppable hitarea */
 #cart ol {
     margin: 0;
     padding: 1em 0 1em 3em;
 }

JavaScript

$(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone",
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        sort: function () {

            $(this).removeClass("ui-state-default");
        },
        over: function () {
            //hides the placeholder when the item is over the sortable
            $(".placeholder").hide(); 

        },
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //shows the placeholder again if there are no items in the list
                $(".placeholder").show();
            }
        }
    });
});