在本文中，我們將向您展示如何創建一個啟用用戶拖動和放置用戶想買的商品的購物車頁面，購物籃中的物品和價格將更新，分享給大家，具體內容如下：
效果圖：
具體代碼如下
顯示頁面上的商品：
<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> 元素中。
創建購物車：
<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實現拖放商品放置購物車的功能就介紹到這，有了本文為大家提供的實例，相信大家應該很輕松的就可以實現拖放商品放置購物車的模塊設計，謝謝大家的閱讀。
新聞熱點
疑難解答
