jQuery UI drag and drop shopping cart

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="products">
     

    <div id="catalog">
        

       
            <div id="selectable">
                <img src="http://lorempixel.com/126/200/?1" />
                <li>Cheezeburger Shirt</li>
                <li>Buckit Shirt</li>
            </div>
        
        

       
    </div>
</div>
<div id="cart">
     <h4 class="ui-widget-header">Shopping Cart 1</h4>

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

CSS

h4 {
    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 img li").draggable({
        appendTo: "body",
        helper: "clone",
        cursorAt: { left: 5 }
    });
    $("#cart ol").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        tolerance: "pointer",
        drop: function (event, ui) {
            var targetDropLocation = $(this);
            $(targetDropLocation).find(".placeholder").remove();            
            ui.draggable.hide( "slow", function() {
         });
            $("<li>"+ui.draggable.text()+"</li>").appendTo(targetDropLocation).hide().show("fast");

        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function () {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $(this).removeClass("ui-state-default");
        }
    });
});