Untitled

UI draggable   droppable append anywhere?
$("#catalog ul, #cart ol").sortable().disableSelection();

//EDIT - for the droppable behaviour to meet the requiremens,
//we need to make individual items in the cart into droppables;
//as more elements are added at runtime, droppable has to be
//re-initiated, otherwise you'll end up only being to drop
//onto the first item in the cart (not cool)
function initDroppable() {
    $("#cart ol li").droppable({
        accept: "#catalog ul li",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            //we're going to clone the item from the cart and
            //insert it after "this", which refers to the item
            //in cart being "dropped onto"
            $("<li></li>").text(ui.draggable.text()).insertAfter(this);
            $("#cart ol li").droppable("destroy");
            initDroppable();
            event.preventDefault();
            return false;
        }
    });
}

//now initialize the cart as a droppable for the first run
initDroppable();

var $catalog_items = $("h3" ).droppable({
    accept: "#catalog ul li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        //reference to the original item that's being dragged
        var $item = $(event.target);
        //well, this is awkward. I couldn't find it in jQuery
        //doco how to find the accordion's list... so we are
        //looking for a "ul" inside of the element that
        //immediately follows the accordion expander element
        //This works out to be "ul inside a div after this h3" :)
        var $list = $("ul", $(this).next());
        //now remove the original item...
        $item.remove();
        //...and add the item to its new parent :)
        //NB simply appending $item didn't work
        $("<li></li>").text(ui.draggable.text()).appendTo($list);
        //new accordion structure = new size
        $catalog.accordion("resize");
        //and trigger the accordion to expand on the correct category
        $(this).click();

        event.preventDefault();
        return false;
    }
});

$( "#cart li" ).droppable({
    drop: function( event, ui ) {
        $( this ).siblings( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).insertAfter( this );
    }
});