轻松学习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.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
绑定回车enter事件代码
May 18 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
vue 调用 RESTful风格接口操作
Aug 11 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Python机器学习之决策树和随机森林
Jul 15 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
深入理解Python中的super()方法
2017/11/20 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
质检的岗位职责
2013/11/17 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
入党后的感想
2015/08/10 职场文书
golang slice元素去重操作
2021/04/30 Golang