轻松学习jQuery插件插件EasyUI EasyUI实现拖放商品放置购物车 轻松学习 实现拖放商品放置购物车 主要帮助大家轻松学习EasyUI实现拖放商品放置购物车的功能，购物篮中的物品和价格也将进行更新，感兴趣 的小伙伴们可以参考一下 在本文中，我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面，购物篮中的物品和价格将更新， 分享给大家，具体内容如下： 效果图： 具体代码如下 显示页面上的商品： 显示页面上的商品：

• 

  Balloon

  Price:$25

• 

  Feeling

  Price:$25

正如您所看到的上面的代码，我们添加一个包含一些

元素的

元素来显示商品。所有商品都有名字和价格属性，它们 包含在

元素中。 创建购物车： 创建购物车：

Shopping Cart

Name	Quantity	Price

Total: $0

Drop here to add to cart

我们使用数据网格（datagrid）来显示购物篮中的物品。 拖动克隆的商品： 拖动克隆的商品： $('.item').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor='move'; } }); 请注意，我们把 draggable 属性的值从 'proxy' 设置为 'clone'，所以拖动元素将由克隆产生。 放置选择商品到购物车中 放置选择商品到购物车中 $('.cart').droppable({ onDragEnter:function(e,source){ 

$(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('$')[1])); } }); var data = {"total":0,"rows":[]}; var totalCost = 0; function addProduct(name,price){ function add(){ for(var i=0; i