使用easyUI创建一个拖放的购物车

@author YHC

如果你能够简单的实现拖动和放置在你的web应用中,然后你知道你有一些特别的东西,使用 jQuery EasyUI我们在我们的应用中可以简单的实现拖动和放置.

在这个教程中我们将向你展示如何创建一个购物车页面启用用户拖动和放置用户想买的商品,购物栏和价格将更新.

查看Demo

显示 商品在页面:

$('.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<data.total; i++){              var row = data.rows[i];              if (row.name == name){                  row.quantity += 1;                  return;              }          }          data.total += 1;          data.rows.push({              name:name,              quantity:1,              price:price          });      }      add();      totalCost += price;      $('#cartcontent').datagrid('loadData', data);      $('div.cart .total').html('Total: $'+totalCost);  }     

每当放置商品的时候,我们首先得到商品名称和价格,然后调用'addProduct'函数更新购物栏.

下载 EasyUI 示例代码:easyui-shopping-demo.zip