jQuery EasyUI glisser - glisser-déposer pour créer un panier

Si vous pouvez à travers vos applications Web simples à mettre en œuvre le glisser-déposer, vous savez quelque chose de spécial. Par jQuery EasyUI, nous pouvons simplement faire glisser et déposer des fonctionnalités dans les applications Web.

Dans ce tutoriel, nous allons vous montrer comment créer une traînée d'utilisateur et déposer des éléments pour permettre aux utilisateurs d'acheter la page du panier. Panier de biens et de prix sera mis à jour.

Les marchandises affichées sur la page

	<ul class = "produits">
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt1.gif" />
				<Div>
					<P> Balloon </ p>
					<P> Prix: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt2.gif" />
				<Div>
					<P> Sentiment </ p>
					<P> Prix: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - Autres produits ->
	</ Ul>

Comme vous pouvez le voir dans le code ci-dessus, nous ajoutons un contenant <ul> numéro de l'élément <li> pour afficher la marchandise. Toute la marchandise a un nom et les propriétés des prix, qui est inclus dans l'élément <p>.

Créer un panier

	<Class Div = "panier">
		<H1> Panier </ h1>
		<Table id = "cartcontent" style = "width: 300px; height: auto;">
			<Thead>
				<Tr>
					<Field Th = largeur "name" = 140> Nom </ th>
					<Th champ = largeur «quantité» = 60 align = "right"> Quantité </ th>
					<Th field = "price" width = 60 align = "right"> Prix </ th>
				</ Tr>
			</ Thead>
		</ Table>
		<P class = "total"> Total: 0 $ </ p>
		<H2> Déposez ici pour ajouter au panier </ h2>
	</ Div>

Nous utilisons la grille de données (DataGrid) pour afficher les articles dans le panier.

Faites glisser le clone de marchandises

	$ ( '. Point'). Draggable ({
		revenir: true,
		proxy: «clone»,
		onDragStart: function () {
			. $ (this) .draggable ( «options») curseur = 'non autorisés';
			. $ (Ce) .draggable ( 'proxy') css ( 'z-index', 10);
		},
		onStopDrag: function () {
			. $ (Ce) .draggable ( «options») curseur = 'move';
		}
	});

S'il vous plaît noter que nous Draggable attribuons la valeur du «proxy» est réglé sur «clone», de sorte que l'élément de traînée produite par clonage.

Placez certains articles au panier

	$ ( '. Cart'). Déposable ({
		OnDragEnter: function (e, source) {
			. $ (Source) .draggable ( «options») cursor = 'auto';
		},
		OnDragLeave: function (e, source) {
			. $ (Source) .draggable ( «options») curseur = 'non autorisée';
		},
		onDrop: function (e, source) {
			. Var name = $ (source) .Find ( 'p: eq (0)') html ();
			. Var prix = $ (source) .Find ( 'p: eq (1)') html ();
			addProduct (nom, parseFloat (price.split ( '$') [1]));
		}
	});
	var data = { "total": 0, "lignes": []};
	var totalCost = 0;
	fonction addProduct (nom, prix) {
		fonction add () {
			for (var i = 0; i <data.total; i ++) {
				var rang = data.rows [i];
				if (row.name == nom) {
					row.quantity + = 1;
					retour;
				}
			}
			data.total + = 1;
			data.rows.push ({
				Nom: nom,
				quantité: 1,
				prix: prix
			});
		}
		ajouter ();
		totalCost + = prix;
		. $ ( '# Cartcontent') datagrid ( 'loadData', données);
		$ ( 'Div.cart .total') html ( 'Total: $' + totalCost) ;.
	}	

Chaque fois que le placement de produits, nous obtenons les premiers noms et des matières premières, et ensuite appeler fonction 'addProduct' pour mettre à jour le panier.

Télécharger exemples jQuery EasyUI

jeasyui-dd-shopping.zip