Jquery 快速构建可拖曳的购物车DragDrop


Posted in Javascript onNovember 30, 2009

这样一来,购买者只需要把自己感兴趣的商品拖曳到自己的购物车中,也可以从购物车中删除商品 同时更新购物车的总体价格和数量。
那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下:
1、 创建Product实体类

public class Product 
{ 
public string Code { get; set; } 
public string Name { get; set; } 
public string Description { get; set; } 
public double Price { get; set; } 
} 
[code] 
2、 构建商品List<Product> 
[code] 
public class Product 
{ 
public string Code { get; set; } 
public string Name { get; set; } 
public string Description { get; set; } 
public double Price { get; set; } 
}

3、创建DataList并绑定List<Product>
<asp:DataList ID="dlProducts" RepeatColumns="3" 
RepeatDirection="Horizontal" runat="server"> 
<ItemTemplate> 
<div class="productItemStyle" price='<%# Eval("Price") %>' 
code='<%# Eval("Code") %>' id='item_<%# Container.ItemIndex + 1 %>'> 
<li> 
<%# Eval("Code") %> 
</li> 
<li> 
<%# Eval("Name") %> 
</li> 
<li> 
<%# Eval("Description") %> 
</li> 
<li> 
$<%# Eval("Price") %> 
</li> 
</div> 
</ItemTemplate> 
</asp:DataList> 
private void BindData() 
{ 
var products = GetProducts(); 
dlProducts.DataSource = products; 
dlProducts.DataBind(); 
}

productItemStyle 样式名称
Container.ItemIndex动态生成连续的商品编号
Jquery 快速构建可拖曳的购物车DragDrop
4、 生成Products Div Draggable
下载最新的Jquery JS文件及其UI文件:
<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript" 
src="jquery-ui-personalized-1.6rc4.min.js"></script>

页面初始化时生成Div Draggable
$(document).ready(function() { 
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" }); 
)};

5、创建一个DropZone
DropZones 是购物车区域
$(".dropZone").droppable( 
{ 
accept: ".productItemStyle", 
hoverClass: "dropHover", 
drop: function(ev, ui) { 
var droppedItem = ui.draggable.clone().addClass("droppedItemStyle"); 
var productCode = droppedItem[0].attributes["code"].nodeValue; 
var productPrice = 
getFormattedPrice(droppedItem[0].attributes["price"].nodeValue); 
var removeLink = document.createElement("a"); 
removeLink.innerHTML = "Remove"; 
removeLink.className = "deleteLink"; 
removeLink.href = "#"; 
removeLink.onclick = function() 
{ 
$(".dropZone").children().remove("#" + droppedItem[0].id); 
updateTotal(productPrice * (-1)); 
} 
droppedItem[0].appendChild(removeLink); 
$(this).append(droppedItem); 
updateTotal(productPrice); 
} 
} 
);

Accept参数:展示Class= “productItemStyle”的Div
hoverClass参数:当有Product放到DropZone时的样式
drop函数:当Product拖放到DropZone时出发的函数,此函数主要做了一个Product Item的Clone,价格的计算、添加Remove按钮以及到点击Remove按钮时所触发的事件。
价格的计算updateTotal()函数
// update the total! 
function updateTotal(price) { 
total += parseFloat(price); 
$("#total").html(total.toFixed(2)); 
$(".shoppingCartTotal").effect("bounce"); 
}

最终效果如下图:
Jquery 快速构建可拖曳的购物车DragDrop
英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
Javascript 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 #Javascript
Ruffy javascript 学习笔记
Nov 30 #Javascript
jquery 分页控件实现代码
Nov 30 #Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 #Javascript
Aptana调试javascript图解教程
Nov 30 #Javascript
jQuery chili图片远处放大插件
Nov 30 #Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 #Javascript
You might like
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
隐性调用php程序的方法
2015/06/13 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python爬虫的工作原理
2017/03/05 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python实现括号匹配方法详解
2020/02/10 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
计算机本科生自荐信
2013/10/15 职场文书
建筑专业自荐信
2013/10/18 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
科研先进个人典型材料
2014/01/31 职场文书
工作决心书
2014/03/11 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript