轻松学习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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
React实现todolist功能
Dec 28 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
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
python求crc32值的方法
2014/10/05 Python
python避免死锁方法实例分析
2015/06/04 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
有关打架的检讨书
2014/01/25 职场文书
教师教学评估方案
2014/05/09 职场文书
质量提升方案
2014/06/16 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
租房协议书样本
2014/08/20 职场文书
师德师风自查材料
2014/10/14 职场文书
员工家属慰问信
2015/03/24 职场文书
复兴之路展览观后感
2015/06/02 职场文书
2015中学学校工作总结
2015/07/20 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python