关闭

使用jQuery插件实现简单购物

222人阅读 评论(0) 收藏 举报

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="_3._21拖拽购物车.WebForm2" %>

<!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 runat="server">
    <title></title>
<style type="text/css">
 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>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.droppable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.sortable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.accordion.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(function () {
         $("#catalog").accordion();
         $("#catalog li").draggable({
             appendTo: "body",
             helper: "clone"
         });
         $("#cart ol").droppable({
             activeClass: "ui-state-default",
             hoverClass: "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 ();
                 $(this).removeClass("ui-state-default");
             }
         });
     });
 </script>
</head>
<body>

<div class="demo">
 
<div id="products">
 <h1 class="ui-widget-header">产品</h1> 
 <div id="catalog">
  <h3><a href="#">家电用具</a></h3>
  <div>
   <ul>
    <li>空调</li>
    <li>冰箱</li>
    <li>电脑</li>
   </ul>
  </div>
  <h3><a href="#">衣服</a></h3>
  <div>
   <ul>
    <li>鞋子</li>
    <li>风衣</li>
    <li>裤子</li>
   </ul>
  </div>
  <h3><a href="#">学习用品</a></h3>
  <div>
   <ul>
    <li>钢笔</li>
    <li>橡皮</li>
    <li>铅笔</li>
   </ul>
  </div>
 </div>
</div>

<div id="cart">
 <h1 class="ui-widget-header">购物车</h1>
 <div class="ui-widget-content">
  <ol>
   <li class="placeholder">Add your items here</li>
  </ol>
 </div>
</div>
</div>
<div class="demo-description">
<p>快乐购物,,欢乐你我</p>
</div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25584次
    • 积分:800
    • 等级:
    • 排名:千里之外
    • 原创:63篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    最新评论