轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车


Posted in Javascript onNovember 30, 2015

在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下:

效果图:

轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车

具体代码如下

显示页面上的商品:

<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>Feeling</p>
  <p>Price:$25</p>
  </div>
 </a>
 </li>
 <!-- other products -->
</ul>

正如您所看到的上面的代码,我们添加一个包含一些 <li> 元素的 <ul> 元素来显示商品。所有商品都有名字和价格属性,它们包含在<p> 元素中。
创建购物车:

<div class="cart">
 <h1>Shopping Cart</h1>
 <table id="cartcontent" 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>
 <p class="total">Total: $0</p>
 <h2>Drop here to add to cart</h2>
</div>

我们使用数据网格(datagrid)来显示购物篮中的物品。
拖动克隆的商品:

$('.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';
 }
});

请注意,我们把 draggable 属性的值从 'proxy' 设置为 'clone',所以拖动元素将由克隆产生。
放置选择商品到购物车中

$('.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]));
 }
});
var data = {"total":0,"rows":[]};
var totalCost = 0;
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);
}

每当放置商品的时候,我们首先得到商品名称和价格,然后调用 'addProduct' 函数来更新购物篮。

EasyUI实现拖放商品放置购物车的功能就介绍到这,有了本文为大家提供的实例,相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计,谢谢大家的阅读。

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vuex入门最详细整理
Mar 04 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
浅析node连接数据库(express+mysql)
Nov 30 #Javascript
javascript编程异常处理实例小结
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 #Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 #Javascript
基于javascript如何传递特殊字符
Nov 30 #Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 #Javascript
You might like
9个实用的PHP代码片段分享
2015/01/22 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python3.0 字典key排序
2008/12/24 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Django之路由层的实现
2019/09/09 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
如何让python的运行速度得到提升
2020/07/08 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
宣传标语大全
2014/07/01 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android