Skip to content
Permalink
Browse files

Adding shopping cart demo for integration of accordion, draggable, dr…

…oppable and sortable
  • Loading branch information
jzaefferer committed Mar 30, 2010
1 parent 5baa180 commit c9a877e81a0138c933c0bc6171e6948949c5c2c9
Showing with 96 additions and 0 deletions.
  1. +96 −0 demos/droppable/shopping-cart.html
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Droppable - Default Demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script type="text/javascript">
$(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();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)"
});

});
</script>
</head>
<body>
<div class="demo">

<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h3><a href="#">T-Shirts</a></h3>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
<h3><a href="#">Bags</a></h3>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Lether</li>
<li>Alligator Lether</li>
</ul>
</div>
<h3><a href="#">Gadgets</a></h3>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>

<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>

</div><!-- End demo -->

<div class="demo-description">

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

</div><!-- End demo-description -->
</body>
</html>

0 comments on commit c9a877e

Please sign in to comment.
You can’t perform that action at this time.