使用jQuery插件实现简单购物
1.完成如下的购物车功能。使用折叠面板来展示产品的目录结构，使用拖拽和放置操作来添加产品到购物车，购物车中的产品是课排序的。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>我的购物车</title>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
h1 {
padding: 10px;
margin: 0;
}
#chanpin {
float: left;
width: 500px;
margin-right: 30px;
}
#gouwu {
width: 300px;
float: left;
margin-top: 20px;
}
#gouwu ol {
margin: 0;
padding: 10px 0 10px 25px;
}
</style>
<script>
$(function() {
$( "#mulu" ).accordion();
$( "#mulu li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#gouwu ol" ).droppable({
activeClass: "ui-state-default",//这个ui插件是设计来用于用户界面元素，以便获得整个应用程序的视觉一致性。这个对可点击按钮元素应用的 Class，对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {//event是事件对象，ui是触发此事件的控件。
$( this ).find( ".placeholder" ).remove();//placeholder是颜色修改。
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="chanpin">
<h1 class="ui-widget-header">产品</h1>
<div id="mulu">
<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> </div>
<h2><a href="#">Gadgets</a></h2>
<div> </div>
</div>
</div>
<div id="gouwu">
<h1 class="ui-widget-header">购物车</h1><!--对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式-->
<div class="ui-widget-content"><!--对内容容器应用-->
<ol>
<li class="placeholder">添加产品到这里</li>
</ol>
</div>
</div>
</body>
</html>
效果图如下：