third-party/jquery-ui-1.10.2/demos/droppable/shopping-cart.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Droppable - Shopping Cart Demo</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.draggable.js"></script>
  12         <script src="../../ui/jquery.ui.droppable.js"></script>
  13         <script src="../../ui/jquery.ui.sortable.js"></script>
  14         <script src="../../ui/jquery.ui.accordion.js"></script>
  15         <link rel="stylesheet" href="../demos.css">
  16         <style>
  17         h1 { padding: .2em; margin: 0; }
  18         #products { float:left; width: 500px; margin-right: 2em; }
  19         #cart { width: 200px; float: left; margin-top: 1em; }
  20         /* style the list to maximize the droppable hitarea */
  21         #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  22         </style>
  23         <script>
  24         $(function() {
  25                 $( "#catalog" ).accordion();
  26                 $( "#catalog li" ).draggable({
  27                         appendTo: "body",
  28                         helper: "clone"
  29                 });
  30                 $( "#cart ol" ).droppable({
  31                         activeClass: "ui-state-default",
  32                         hoverClass: "ui-state-hover",
  33                         accept: ":not(.ui-sortable-helper)",
  34                         drop: function( event, ui ) {
  35                                 $( this ).find( ".placeholder" ).remove();
  36                                 $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  37                         }
  38                 }).sortable({
  39                         items: "li:not(.placeholder)",
  40                         sort: function() {
  41                                 // gets added unintentionally by droppable interacting with sortable
  42                                 // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
  43                                 $( this ).removeClass( "ui-state-default" );
  44                         }
  45                 });
  46         });
  47         </script>
  48 </head>
  49 <body>
  50
  51 <div id="products">
  52         <h1 class="ui-widget-header">Products</h1>
  53         <div id="catalog">
  54                 <h2><a href="#">T-Shirts</a></h2>
  55                 <div>
  56                         <ul>
  57                                 <li>Lolcat Shirt</li>
  58                                 <li>Cheezeburger Shirt</li>
  59                                 <li>Buckit Shirt</li>
  60                         </ul>
  61                 </div>
  62                 <h2><a href="#">Bags</a></h2>
  63                 <div>
  64                         <ul>
  65                                 <li>Zebra Striped</li>
  66                                 <li>Black Leather</li>
  67                                 <li>Alligator Leather</li>
  68                         </ul>
  69                 </div>
  70                 <h2><a href="#">Gadgets</a></h2>
  71                 <div>
  72                         <ul>
  73                                 <li>iPhone</li>
  74                                 <li>iPod</li>
  75                                 <li>iPad</li>
  76                         </ul>
  77                 </div>
  78         </div>
  79 </div>
  80
  81 <div id="cart">
  82         <h1 class="ui-widget-header">Shopping Cart</h1>
  83         <div class="ui-widget-content">
  84                 <ol>
  85                         <li class="placeholder">Add your items here</li>
  86                 </ol>
  87         </div>
  88 </div>
  89
  90 <div class="demo-description">
  91 <p>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.</p>
  92 </div>
  93 </body>
  94 </html>