jQuery EasyUI trascina - drag and drop per creare un carrello della spesa

Se è possibile attraverso le applicazioni Web semplici da implementare drag and drop, si sa qualcosa di speciale. Con jQuery EasyUI, possiamo semplicemente trascinare e rilasciare le funzionalità nelle applicazioni Web.

In questo tutorial, vi mostreremo come creare un trascinamento utente e rilasciare gli elementi per consentire agli utenti di acquistare la pagina del carrello. Carrello paniere di beni e prezzi sarà aggiornato.

Merce visualizzati nella pagina

	<class = "prodotti" ul>
		<LI>
			<a href="#" class="item">
				<Img src = "images / shirt1.gif" />
				<Div>
					<P> Balloon </ p>
					<P> Prezzo: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<LI>
			<a href="#" class="item">
				<Img src = "images / shirt2.gif" />
				<Div>
					<P> sensibilità </ p>
					<P> Prezzo: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - Altri prodotti ->
	</ Ul>

Come si può vedere nel codice precedente, si aggiunge una contenente <ul> numero elemento <li> per visualizzare merce. Tutta la merce ha un nome e le proprietà di prezzo, che è incluso nell'elemento <p>.

Creare un Carrello

	<Div class = "carrello">
		<H1> Carrello </ h1>
		<Table id = stile "cartcontent" = "width: 300px; height: auto;">
			<Thead>
				<Tr>
					<Th campo = larghezza "nome" = 140> Nome </ th>
					<Th campo = larghezza "quantità" = 60 align = "right"> Quantità </ th>
					<Th campo = larghezza "prezzo" = 60 align = "right"> Prezzo </ th>
				</ Tr>
			</ Thead>
		</ Table>
		<P class = "totale"> Totale: $ 0 </ p>
		<H2> Rilascia qui per aggiungere al carrello </ h2>
	</ Div>

Usiamo la griglia di dati (DataGrid) per visualizzare le voci nel carrello.

Trascinare il clone di merci

	$ ( '. Articolo'). Draggable ({
		tornare: è vero,
		delega: 'clone',
		onStartDrag: function () {
			. $ (this) .draggable ( "opzioni") cursore = 'non-permesso';
			. $ (Questo) .draggable ( 'delega') css ( 'z-index', 10);
		},
		onStopDrag: function () {
			. $ (Questo) .draggable cursore ( 'opzioni') = 'movimento';
		}
	});

Si prega di notare che trascinabili attribuiamo valore dal 'delega' è impostato su 'clone', così l'elemento di trascinamento prodotto dalla clonazione.

Mettere selezionare gli elementi al carrello della spesa

	$ ( '. Carrello'). Droppable ({
		OnDragEnter: la funzione (e, sorgente) {
			. $ (Fonte) .draggable ( 'opzioni') cursore = 'auto';
		},
		onDragLeave: la funzione (e, sorgente) {
			. $ (Fonte) .draggable ( 'opzioni') cursore = 'non-permesso';
		},
		onDrop: la funzione (e, sorgente) {
			Var. Name = $ (fonte) .find ( 'p: eq (0)') html ();
			Var. Prezzo = $ (fonte) .find ( 'p: eq (1)') html ();
			addProduct (nome, parseFloat (price.split ( '$') [1]));
		}
	});
	var data = { "totale": 0, "righe": []};
	var totalcost = 0;
	Funzione addProduct (nome, prezzo) {
		la funzione add () {
			for (var i = 0; i <data.total; i ++) {
				fila var = data.rows [i];
				if (row.name == nome) {
					row.quantity + = 1;
					tornare;
				}
			}
			data.total + = 1;
			data.rows.push ({
				name: nome,
				quantità: 1,
				prezzo: prezzo
			});
		}
		add ();
		totalcost + = prezzo;
		. $ ( '# Cartcontent') DataGrid ( 'loadData', dei dati);
		$ ( 'Div.cart .total') html ( 'totale: $' + totalcost) ;.
	}	

Ogni volta che il posizionamento delle merci, otteniamo il primo nome e delle materie prime i prezzi, e quindi chiamare la funzione 'addProduct' per aggiornare il carrello.

Scarica esempi jQuery EasyUI

jeasyui-dd-shopping.zip