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 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
删除select中所有option选项jquery代码
2013/08/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
Python制作CSDN免积分下载器
2015/03/10 Python
python获取mp3文件信息的方法
2015/06/15 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
《忆江南》教学反思
2014/04/07 职场文书
房产协议书范本2014
2014/09/30 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python