jQuery EasyUI 拖放 – 創(chuàng)建拖放的購(gòu)物車

jQuery EasyUI 拖放 - 創(chuàng)建拖放的購(gòu)物車

在jQuery EasyUI拖放 - 基本的拖動(dòng)和放置一節(jié)中，我們已經(jīng)了解了HTML元素的基本拖動(dòng)和放置，在本節(jié)內(nèi)容中，我們將這些拖放和放置功能運(yùn)用到你的Web應(yīng)用中。

在本節(jié)中，我們將向您展示如何創(chuàng)建一個(gè)啟用用戶拖動(dòng)和放置用戶想買的商品的購(gòu)物車頁(yè)面，當(dāng)拖到和放置物品時(shí)，購(gòu)物籃中的物品和價(jià)格將相應(yīng)更新。

顯示頁(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)物車

	<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)物車中

	$('.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í)候，我們首先得到商品名稱和價(jià)格，然后調(diào)用'addProduct'函數(shù)來(lái)更新購(gòu)物籃。

下載 jQuery EasyUI 實(shí)例

jeasyui-dd-shopping.zip