Jquery 快速构建可拖曳的购物车DragDrop
2009-11-30 00:00
706 查看
这样一来,购买者只需要把自己感兴趣的商品拖曳到自己的购物车中,也可以从购物车中删除商品 同时更新购物车的总体价格和数量。
那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下:
1、 创建Product实体类
3、创建DataList并绑定List<Product>
productItemStyle 样式名称
Container.ItemIndex动态生成连续的商品编号
4、 生成Products Div Draggable
下载最新的Jquery JS文件及其UI文件:
页面初始化时生成Div Draggable
5、创建一个DropZone
DropZones 是购物车区域
Accept参数:展示Class= “productItemStyle”的Div
hoverClass参数:当有Product放到DropZone时的样式
drop函数:当Product拖放到DropZone时出发的函数,此函数主要做了一个Product Item的Clone,价格的计算、添加Remove按钮以及到点击Remove按钮时所触发的事件。
价格的计算updateTotal()函数
最终效果如下图:
英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化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动态生成连续的商品编号
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"); }
最终效果如下图:
英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
相关文章推荐
- Jquery快速构建可拖曳的购物车-DragDrop
- Jquery快速构建可拖曳的购物车-DragDrop
- Jquery快速构建可拖曳的购物车-DragDrop
- jQuery 拖动浮动层(PopLayer Drag and Drop)
- [jQuery]Drag And Drop Everything With 30 Handy jQuery Plugins
- 分享10个使用简单的jQuery的拖放插件(drag and drop plugin)
- Flex官方快速入门教程翻译之19.Adding_Drag_and_Drop增加拖放功能
- 结合 JSONP 和 jQuery 快速构建强大的 mashup
- Table Drag and Drop JQuery plugin
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- 使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
- html5中drag//drop拖曳效果的用法
- jQuery能够实现drag和drop功能的类似igoogle的插件
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
- 使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- 不要再吹水地球人听不懂的技术,咱来点干货!--中文前端UI框架Kit(四)给你真正的原生的drag以及drop事件,而不是像市面上主流的Js框架jQuery,Ext等,利用mousemove事件,判断位置来模拟
- 开源jQuery插件推荐,帮你快速构建单页网站
- 练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能