輕松學習jQuery插件EasyUI EasyUI實現(xiàn)拖放商品放置購物車

更新時間：2022年05月06日 14:59:00 投稿：lijiao

這篇文章主要幫助大家輕松學習EasyUI實現(xiàn)拖放商品放置購物車的功能，購物籃中的物品和價格也將進行更新，感興趣的小伙伴們可以參考一下

在本文中，我們將向您展示如何創(chuàng)建一個啟用用戶拖動和放置用戶想買的商品的購物車頁面，購物籃中的物品和價格將更新，分享給大家，具體內(nèi)容如下：

效果圖：

具體代碼如下

顯示頁面上的商品：

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

正如您所看到的上面的代碼，我們添加一個包含一些 <li> 元素的 <ul> 元素來顯示商品。所有商品都有名字和價格屬性，它們包含在<p> 元素中。

創(chuàng)建購物車：

<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>

我們使用數(shù)據(jù)網(wǎng)格（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'，所以拖動元素將由克隆產(chǎn)生。
放置選擇商品到購物車中

$('.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);
}

每當放置商品的時候，我們首先得到商品名稱和價格，然后調(diào)用 'addProduct' 函數(shù)來更新購物籃。

EasyUI實現(xiàn)拖放商品放置購物車的功能就介紹到這，有了本文為大家提供的實例，相信大家應該很輕松的就可以實現(xiàn)拖放商品放置購物車的模塊設計，謝謝大家的閱讀。

您可能感興趣的文章: