2012-09-10 15:33:46 +00:00
<!doctype html>
2010-03-30 19:57:43 +00:00
< html lang = "en" >
< head >
2010-09-10 13:38:42 +00:00
< meta charset = "utf-8" >
2010-03-30 20:08:43 +00:00
< title > jQuery UI Droppable - Shopping Cart Demo< / title >
2010-09-10 13:38:42 +00:00
< link rel = "stylesheet" href = "../../themes/base/jquery.ui.all.css" >
2013-06-01 19:25:27 +00:00
< script src = "../../jquery-1.10.2.js" > < / script >
2010-09-10 13:38:42 +00:00
< script src = "../../ui/jquery.ui.core.js" > < / script >
< script src = "../../ui/jquery.ui.widget.js" > < / script >
< script src = "../../ui/jquery.ui.mouse.js" > < / script >
< script src = "../../ui/jquery.ui.draggable.js" > < / script >
< script src = "../../ui/jquery.ui.droppable.js" > < / script >
< script src = "../../ui/jquery.ui.sortable.js" > < / script >
< script src = "../../ui/jquery.ui.accordion.js" > < / script >
< link rel = "stylesheet" href = "../demos.css" >
< style >
2010-03-30 19:57:43 +00:00
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
2012-06-15 17:28:48 +00:00
#cart { width: 200px; float: left; margin-top: 1em; }
2010-03-30 19:57:43 +00:00
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
< / style >
2010-09-10 13:38:42 +00:00
< script >
2010-03-30 19:57:43 +00:00
$(function() {
2010-09-10 13:38:42 +00:00
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
2010-03-30 19:57:43 +00:00
appendTo: "body",
helper: "clone"
});
2010-09-10 13:38:42 +00:00
$( "#cart ol" ).droppable({
2010-03-30 19:57:43 +00:00
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
2010-09-10 13:38:42 +00:00
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "< li > < / li > " ).text( ui.draggable.text() ).appendTo( this );
2010-03-30 19:57:43 +00:00
}
}).sortable({
2010-03-30 20:08:04 +00:00
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
2010-09-10 13:38:42 +00:00
$( this ).removeClass( "ui-state-default" );
2010-03-30 20:08:04 +00:00
}
2010-03-30 19:57:43 +00:00
});
});
< / script >
< / head >
< body >
2010-09-10 13:38:42 +00:00
2010-03-30 19:57:43 +00:00
< div id = "products" >
2012-06-15 17:28:48 +00:00
< h1 class = "ui-widget-header" > Products< / h1 >
2010-03-30 19:57:43 +00:00
< div id = "catalog" >
2012-06-15 17:28:48 +00:00
< h2 > < a href = "#" > T-Shirts< / a > < / h2 >
2010-03-30 19:57:43 +00:00
< div >
< ul >
< li > Lolcat Shirt< / li >
< li > Cheezeburger Shirt< / li >
< li > Buckit Shirt< / li >
< / ul >
< / div >
2012-06-15 17:28:48 +00:00
< h2 > < a href = "#" > Bags< / a > < / h2 >
2010-03-30 19:57:43 +00:00
< div >
< ul >
< li > Zebra Striped< / li >
2010-03-30 20:04:23 +00:00
< li > Black Leather< / li >
< li > Alligator Leather< / li >
2010-03-30 19:57:43 +00:00
< / ul >
< / div >
2012-06-15 17:28:48 +00:00
< h2 > < a href = "#" > Gadgets< / a > < / h2 >
2010-03-30 19:57:43 +00:00
< 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 >
2010-09-10 13:38:42 +00:00
< div class = "demo-description" >
2012-10-24 15:40:06 +00:00
< 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 >
2012-09-10 15:33:46 +00:00
< / div >
2010-03-30 19:57:43 +00:00
< / body >
< / html >
