简单实现拖动商品,加入购物车并总计商品的功能
2015-07-02 16:12
651 查看
<body> <ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> <div> <p>Balloon</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt2.gif"/> <div> <p>Felling</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt3.gif"/> <div> <p>Balloon3</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt4.gif"/> <div> <p>Balloon4</p> <p>Price:$25</p> </div> </a> </li> </ul> <div class="cart"> <h1>shopping cart</h1> <div style="background:#fff"> <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> </div> <p class="total">Total: $0</p> <h2>Drop here to add to cart</h2> </div> </body>
<link rel="stylesheet" type="text/css" href="easyui.css"> <link rel="stylesheet" type="text/css" href="icon.css"> <style type="text/css"> .products{ list-style:none; margin-right:300px; padding:0px; height:100%; } .products li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ position:fixed; right:0; top:0; width:300px; height:100%; background:#ccc; padding:0px 10px; } h1{ text-align:center; color:#555; } h2{ position:absolute; font-size:16px; left:10px; bottom:20px; color:#555; } .total{ margin:0; text-align:right; padding-right:20px; } </style>
<script type="text/javascript" src="jquery-1.11.2.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript"> var data = {"total":0,"rows":[]}; var totalCost = 0; $(function(){ $('#cartcontent').datagrid({ singleSelect:true }); $('.item').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor = 'move'; } }); $('.cart').droppable({ onDragEnter:function(e,source){ $(source).draggable('options').cursor = 'auto'; }, onDragLeave:function(e,source){ $(source).draggable('options').cursor = 'not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name,parseFloat(price.split('$')[1])); } }); }); function addProduct(name,price){ function add(){ for(var i = 0;i<data.total;i++){ var row = data.rows[i]; if(row.name == name){ row.quantity += 1; return; } } data.total += 1; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalCost += price; $('#cartcontent').datagrid('loadData',data); $('div.cart .total').html('Total:$'+totalCost); } </script>
相关文章推荐
- 账目簿结算
- 采购结算流程图
- 支付清算体系介绍(上)
- 结算方式 显示
- 购物车结算
- jQuery实现购物车表单自动结算效果实例
- 纯jquery实现模仿淘宝购物车结算
- jquery购物车结算功能实现方法
- SQL Script for select data from ebs and make a csv file to FTP
- UVa - 102 - Ecological Bin Packing
- git命令之git stash apply和 pop 的区别
- 【SpringMVC】下载功能
- Win10在UEFI启动机制下无法更新升级的解决方法
- 简单邮件服务器postfix+dovecot搭建
- Memcached初步使用
- Android知识点
- Haskell之Yesod开发–边踩坑边开发(4)
- 数组实现栈的代码
- 理解ActiveRecord模式
- [java]用HSSFWorkbook来读取excel的内容