$(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); $( "
  • " ).text( ui.draggable.text() ).appendTo( this ); } }).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" ); } }); });

    Products

    T-Shirts

    • Lolcat Shirt
    • Cheezeburger Shirt
    • Buckit Shirt

    Bags

    • Zebra Striped
    • Black Leather
    • Alligator Leather

    Gadgets

    • iPhone
    • iPod
    • iPad

    Shopping Cart

    1. Add your items here

    Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.