轻松学习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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascript Excel操作知识点
2009/04/24 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JsRender实用入门教程
2014/10/31 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python定时器使用示例分享
2014/02/16 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
int和Integer有什么区别
2013/05/25 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
高一学生期末评语
2014/04/25 职场文书
个人党性分析材料
2014/12/19 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
python 镜像环境搭建总结
2022/09/23 Python