构建一个拖放购物车

使用教程 » 构建一个拖放购物车

如果您可以轻松地用web应用程序实现拖放，那么您就知道您得到了一些特殊的东西。 使用jQuery EasyUI，我们在web应用程序中具有拖放功能.

在本教程中，我们将向您展示如何构建一个购物车页面，使用户能够拖放他们希望购买的产品。 购物篮的物品和价格将会更新。

在页面上显示产品:

<ul class="products"> <li> <a href="#" class="item"> <img src="/jeasyui/tutorial/dd/images/shirt1.gif"/> <div> <p>Balloon</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="/jeasyui/tutorial/dd/images/shirt2.gif"/> <div> <p>Feeling</p> <p>Price:$25</p> </div> </a> </li> <!-- other products --> </ul>

正如您在上面的代码中看到的，我们添加了一个ul元素并在其中添加了一些li元素来展示商品，所有产商品的名称和价格 属性都包含在p元素中。

Build the cart:

<div class="cart"> <h1>Shopping Cart</h1> <table id="cartcontent" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> <p class="total">Total: $0</p> <h2>Drop here to add to cart</h2> </div>

我们使用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<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 实例: