轻松学习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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
浅析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
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python基于phantomjs实现导入图片
2016/05/13 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
酒店管理自荐信
2013/10/23 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
教师自我鉴定范文
2014/03/20 职场文书
超市创业计划书
2014/04/24 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js