jEasyUI crée un panier par glisser-déposer

Si vous pouvez simplement mettre en œuvre le glisser-déposer dans votre application Web, vous savez que vous êtes sur quelque chose de spécial. Avec jQuery EasyUI, nous pouvons simplement implémenter la fonctionnalité glisser-déposer dans les applications Web.

Dans ce tutoriel, nous allons vous montrer comment créer une page de panier qui permet aux utilisateurs de faire glisser et de placer les articles qu'ils souhaitent acheter. Les articles et les prix dans le panier seront mis à jour.

Afficher les produits sur la 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>

Comme vous pouvez le voir le code ci-dessus, nous ajoutons un élément <ul> . Tous les produits ont des attributs de nom et de prix, qui sont contenus dans l'élément <p>

Créer un panier

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

Nous utilisons une grille de données pour afficher les articles dans le panier.

Faites glisser les éléments clonés

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

Veuillez noter que nous définissons la valeur de l'attribut déplaçable de 'proxy' à 'clone', de sorte que l'élément déplaçable sera cloné.

Placer les produits sélectionnés dans le panier

Chaque fois qu'un produit est placé, nous obtenons d'abord le nom et le prix du produit, puis appelons la fonction « addProduct » pour mettre à jour le panier.

Télécharger l'instance jQuery EasyUI

jeasyui-dd-shopping.zip