jEasyUI はドラッグ アンド ドロップ ショッピング カートを作成します

Web アプリでドラッグ アンド ドロップを簡単に実装できれば、何か特別なものがあることが分かります。 jQuery EasyUI を使用すると、Web アプリケーションにドラッグ アンド ドロップ機能を簡単に実装できます。

このチュートリアルでは、ユーザーが購入したい商品をドラッグして配置できるショッピング カート ページを作成する方法を説明します。買い物かご内の商品と価格が更新されます。

ページに商品を表示します

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

上記のコードでわかるように、商品を表示するために、いくつかの <li> 要素を含む <ul> 要素を追加します。すべての製品には name 属性と Price 属性があり、これらは <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: 
	$('.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';
		}
	});
</p>
		<h2>Drop here to add to cart</h2>
	</div>

データグリッドを使用してショッピングカート内の商品を表示します。

クローンアイテムをドラッグ

	$('.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」関数を呼び出してショッピングカートを更新します。

jQuery EasyUI サンプルをダウンロード

jeasyui-dd-shopping.zip