- <span style="font-size:18px;">效果图</span>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <!-- 引入js类库 -->
- <script language="javascript" src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
- <script language="javascript" src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
- <!-- 引入css类库 -->
- <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
- <script type="text/javascript" language="javascript">
- $(function (){
- $("#catalog").accordion(); //手风琴效果
- $("#products li").draggable({ //添加拖拽效果
- connectToSortable:"#ui-widget-content ol", //向ol中添加元素
- appendTo:"body", //追加到body中
- helper:"clone", //克隆
- revert:true //是否返回原来的地方
- });
- $("#ui-widget-content ol").sortable({
- sort:function(event,ui){ //触发事件
- $(this).find("#placeholder").remove(); //触发事件时进行删除
- }
- });
- });
- </script>
- <style>
- 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>
- </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 Leather</li>
- <li>Alligator Leather</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 id="ui-widget-content">
- <ol> <!--ol 表示有序列表 -->
- <li class="placeholder" id="placeholder">Add your items here</li>
- </ol>
- </div>
- </div>
- </div><!-- End demo -->
- </body>
- </html>