diff options
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/droppable/shopping-cart.html | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html deleted file mode 100644 index 747c23a83..000000000 --- a/demos/droppable/shopping-cart.html +++ /dev/null @@ -1,96 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Droppable - Shopping Cart Demo</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <script src="../../external/jquery/jquery.js"></script> - <script src="../../ui/core.js"></script> - <script src="../../ui/widget.js"></script> - <script src="../../ui/mouse.js"></script> - <script src="../../ui/draggable.js"></script> - <script src="../../ui/droppable.js"></script> - <script src="../../ui/sortable.js"></script> - <script src="../../ui/accordion.js"></script> - <link rel="stylesheet" href="../demos.css"> - <style> - 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; } - </style> - <script> - $(function() { - $( "#catalog" ).accordion(); - $( "#catalog li" ).draggable({ - appendTo: "body", - helper: "clone" - }); - $( "#cart ol" ).droppable({ - classes: { - "ui-droppable-active": "ui-state-active", - "ui-droppable-hover": "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)", - 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" ); - } - }); - }); - </script> -</head> -<body> - -<div id="products"> - <h1 class="ui-widget-header">Products</h1> - <div id="catalog"> - <h2><a href="#">T-Shirts</a></h2> - <div> - <ul> - <li>Lolcat Shirt</li> - <li>Cheezeburger Shirt</li> - <li>Buckit Shirt</li> - </ul> - </div> - <h2><a href="#">Bags</a></h2> - <div> - <ul> - <li>Zebra Striped</li> - <li>Black Leather</li> - <li>Alligator Leather</li> - </ul> - </div> - <h2><a href="#">Gadgets</a></h2> - <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 class="demo-description"> -<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> -</div> -</body> -</html> |