jQuery UI & Droppable: Shopping Cart Demo

This entry is part 4 of 7 in the series jQuery UI Droppable

jQuery UI Droppable – Shopping Cart Demo

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.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Droppable - Shopping Cart Demo</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.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;
        $(function () {
            $('#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) {
                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

<div id='products'>
    <h1 class='ui-widget-header'>Products</h1>

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

                <li>Lolcat Shirt</li>
                <li>Cheezeburger Shirt</li>
                <li>Buckit Shirt</li>
        <h2><a href='#'>Bags</a></h2>

                <li>Zebra Striped</li>
                <li>Black Leather</li>
                <li>Alligator Leather</li>
        <h2><a href='#'>Gadgets</a></h2>


<div id='cart'>
    <h1 class='ui-widget-header'>Shopping Cart</h1>

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

Try The Code
Series Navigation<< jQuery UI & Droppable: Accept
jQuery UI & Droppable: Prevent Propagation >>

Leave a comment

Leave a Reply