轻松学习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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
浅析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
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vue组件的写法汇总
2018/04/12 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
解决vue 退出动画无效的问题
2020/08/09 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python3中使用PyMongo的方法详解
2017/07/28 Python
python opencv实现图像配准与比较
2021/02/09 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
华为慧通面试题
2012/09/11 面试题
大专生毕业的自我评价
2014/02/06 职场文书
综艺节目策划方案
2014/06/13 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
维稳承诺书
2015/01/20 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
微信早安问候语
2015/11/10 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书