轻松学习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 相关文章推荐
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
jquery实现页面加载效果
Feb 21 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
layui导航栏实现代码
2017/05/19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Django中的Signal代码详解
2018/02/05 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
军训拉歌口号
2014/06/13 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
刑事法律意见书
2015/06/04 职场文书
永远是春天观后感
2015/06/12 职场文书
工作年限证明模板
2015/06/15 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
诉讼和解协议书
2016/03/23 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL