jEasyUI 創(chuàng)建拖放的購(gòu)物車(chē)

如果您能夠通過(guò)您的 Web 應(yīng)用簡(jiǎn)單地實(shí)現(xiàn)拖動(dòng)和放置，您就會(huì)知道一些特別的東西。通過(guò) jQuery EasyUI，我們?cè)?Web 應(yīng)用中可以簡(jiǎn)單地實(shí)現(xiàn)拖放功能。

在本教程中，我們將向您展示如何創(chuàng)建一個(gè)啟用用戶(hù)拖動(dòng)和放置用戶(hù)想買(mǎi)的商品的購(gòu)物車(chē)頁(yè)面。購(gòu)物籃中的物品和價(jià)格將更新。

顯示頁(yè)面上的商品

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

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

創(chuàng)建購(gòu)物車(chē)

????<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）來(lái)顯示購(gòu)物籃中的物品。

拖動(dòng)克隆的商品

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

請(qǐng)注意，我們把 draggable 屬性的值從 'proxy' 設(shè)置為 'clone'，所以拖動(dòng)元素將由克隆產(chǎn)生。

放置選擇商品到購(gòu)物車(chē)中

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

每當(dāng)放置商品的時(shí)候，我們首先得到商品名稱(chēng)和價(jià)格，然后調(diào)用 'addProduct' 函數(shù)來(lái)更新購(gòu)物籃。

上一篇：jEasyUI 基本的拖動(dòng)和放置下一篇：jEasyUI 創(chuàng)建學(xué)校課程表