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

这样一来，购买者只需要把自己感兴趣的商品拖曳到自己的购物车中，也可以从购物车中删除商品同时更新购物车的总体价格和数量。那咱们就开始实例吧，本实例并没有链接数据库读取数据来初始化产品，而是创建了一些虚拟的商品如下： 1、 创建产品实体类复制代码代码如下：公共类产品{公共字符串代码{获取设置；}公共字符串名称{获取设置；}公共字符串描述{ get设置；}公共双价格{获取设置；} }[代码] 2,构建商品列表产品[代码]公共类产品{公共字符串代码{获取设置；}公共字符串名称{获取设置；}公共字符串描述{ get设置；}公共双价格{获取设置；} } 3、创建数据列表并绑定列表产品复制代码代码如下： asp:目录ID=' dlProducts '重复列=' 3 '重复方向=' Horizontal ' runat=' server '项目模板div class=' productitestyle ' Price=' % # Eval(' Price ' % ' Code=' % # Eval(' Code ')% ' ID=' item _ % # Container .项目索引% 1 ' Li % #评估('代码')%/Li Li % #评估('名称')%/Li Li % #评估('描述')%/Li Li $ % #评估('价格')%/Li/div/项目模板/asp:目录私有void BindData(){ var products=GetProducts()；dlProducts .数据源=产品；dlProducts .DataBind()；} productItemStyle样式名称集装箱。索引动态生成连续的商品编号

4、 生成产品部可拖动下载最新的Jquery JS文件及其用户界面文件：复制代码代码如下：脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : jquery-1。2 .6 .量滴js /脚本脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http : jquery-ui-personalized-1.6 RC4。量滴js /脚本页面初始化时生成可拖动的分区复制代码代码如下：美元（文件)。ready(function() { $(')).ProductItemStyle’).可拖动({ helper: 'clone '，opa city 3360 ' 0.5 ' })；)};5、创建一个DropZone DropZones是购物车区域复制代码代码如下： $('.dropZone ').可删除({ accept: ' .productItemStyle、“悬停类”:“DropHover”、drop:函数(ev，ui){ var droppet item=ui。可拖动。克隆().添加类(“droppettitemstyle”)；var ProductCode=删除项目[0].属性['代码']。nodevaluvar ProductPrice=GetformatedPice(删除项[0]).属性['价格']。节点值)；var移除链接=文档。创建元素(' a ')；remove link . innerHTMl=' remove remove link。类名='删除链接'；删除链接。href=" #删除链接。onclick=function(){ $(').dropZone ').儿童()。移除(“#”DropItem[0]).id)；updateTotaL(ProductPrice *(1))；}删除项目[0].appendChild(删除链接)；$(这个)。追加(DropItem)；updateTotaL(ProductPrice)；} } );接受参数：展示Class="productItemStyle "的差异悬停类参数：当有产品放到DropZone时的样式滴函数：当产品拖放到DropZone时出发的函数，此函数主要做了一个产品项目的克隆，价格的计算、添加移动按钮以及到点击移动按钮时所触发的事件。价格的计算updateTotal()函数复制代码代码如下： //更新总数！函数updateTotal(价格){ total=parseFloat(价格)；$('#total ').html(总计。to fixed(2))；$('.购物卡总计’.效果("弹跳");} 最终效果如下图

英文原文地址：http://www .代码项目。com/KB/aspnet/jqueryshoppingcart。文件