jQuery UI drag and drop shopping cart

by VENKATA VINAY BYSANI

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">
<p>There are various ways to customize the animation of a tooltip.</p>
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>

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;
}
label {
    display: inline-block;
    width: 5em;
}

JavaScript

$(function () {
    $("#show-option").tooltip({
        show: {
            effect: "slideDown",
            delay: 250
        },
        position: "left",
        open: function( event, ui ) {
            //alert("after open");
        }
    });
    $("#hide-option").tooltip({
        hide: {
            effect: "explode",
            delay: 250
        }
    });
    $("#open-event").tooltip({
        show: null,
        position: {
            my: "left top",
            at: "left bottom"
        },
        open: function (event, ui) {
            ui.tooltip.animate({
                top: ui.tooltip.position().top + 10
            }, "fast");
        }
    });
});