jEasyUI creates a drag-and-drop shopping cart

If you can simply implement drag and drop through your web app, you know you're onto something special. With jQuery EasyUI, we can simply implement drag-and-drop functionality in web applications.

In this tutorial, we will show you how to create a shopping cart page that enables users to drag and place items they want to buy. The items and prices in the shopping basket will be updated.

Display products on the page

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

As you can see the above code, we add an <ul> element that contains some <li> elements to display the products . All products have name and price attributes, which are contained in the <p> element.

Create Shopping Cart

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

We use a data grid (datagrid) to display the items in the shopping basket.

Drag cloned items

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

Please note that we set the value of the draggable attribute from 'proxy' to 'clone', so the draggable element will be generated by a clone.

Place selected products into the shopping cart

Whenever we place a product, we first get the product name and price, and then call the 'addProduct' function to update the shopping basket.

Download jQuery EasyUI instance

jeasyui-dd-shopping.zip