在本文中，我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面，购物篮中的物品和价格将更新，分享给大家，具体内容如下：

效果图：

具体代码如下

显示页面上的商品：

ul class='产品'阿利href=' # ' class=' item ' img src=' http : images/衬衫1。gif阿利href=' # ' class=' item ' img src=' http : images/衬衫2。gif '/div pffeel/p pprice 3360 $ 25/p/div/a/Li！-其他产品- /ul正如您所看到的上面的代码，我们添加一个包含一些里元素的保险商实验所元素来显示商品。所有商品都有名字和价格属性，它们包含在p元素中。创建购物车：

div class=' cart购物车/h1表id=' Cart content ' style=' width :300 px；'高度：自动'第一个字段='name '宽度=140名称/第一个字段='数量'宽度=60 align='右'数量/第一个字段='价格'宽度=60 align=' right ' price/th/tr/the ad/table p class=' total ' total : $ 0/p H2单击此处添加到购物车/h2/div我们使用数据网格（数据网格)来显示购物篮中的物品。拖动克隆的商品：

$('.项目')。可拖动({ revert:true，proxy:'clone '，onstartdrag : FuncTion(){ $(this)).可拖动("选项")。游标="不允许";$(这个)。可拖动("代理")。css('z-index '，10)；}，ontopdrag : function(){ $(this).可拖动("选项")。光标='移动；}});请注意，我们把可拖动的属性的值从代理人设置为克隆，所以拖动元素将由克隆产生。放置选择商品到购物车中

$('.大车')。可删除({ onDragEnter:function(e，source){ $(source)).可拖动("选项")。光标=' auto}，onDragLeave:function(e，source){ $(source).可拖动("选项")。游标="不允许";}，onDrop:function(e，source){ var name=$(source).find('p:eq(0)').html()；var price=$(来源)。find('p:eq(1)').html()；添加产品(名称，ParseFloat(价格。split(' $ ')[1])；}});定义变量数据={'total':0，' row ' :[]}；var总成本=0；函数添加产品(名称，价格){函数add(){ for(var I=0；idata . TotaL){ var row=data。行[I]；if(row。name==name){ row。数量=1；返回；} }数据。总计=1；data.rows.push({ name:name，quantity:1，price : price })；} add()；总成本=价格；$('#cartcontent ').datagrid('loadData '，data)；$('div.cart .总计')。html(' Total: $ ' TotalCost)；} 每当放置商品的时候，我们首先得到商品名称和价格，然后调用'添加产品'函数来更新购物篮。

易居实现拖放商品放置购物车的功能就介绍到这，有了本文为大家提供的实例，相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计，谢谢大家的阅读。