jQuery EasyUI Drag - Drag & Drop einen Einkaufswagen zu schaffen

Wenn Sie Ihren Web-Anwendungen einfach durch können per Drag-and-Drop zu implementieren, wissen Sie etwas Besonderes. Mit jQuery EasyUI können wir einfach ziehen und Funktionalität in Web-Anwendungen fallen.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen Benutzer ziehen zu erstellen und Elemente fallen Benutzer zu ermöglichen, die Warenkorb-Seite zu kaufen. Warenkorb von Waren und Preise werden aktualisiert.

Waren angezeigt auf der Seite

	<Ul class = "Produkte">
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt1.gif" />
				<Div>
					<P> Ballon </ p>
					<P> Preis: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt2.gif" />
				<Div>
					<P> Gefühl </ p>
					<P> Preis: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - Mehr Produkte ->
	</ Ul>

Wie Sie im obigen Code sehen können, wir mit <ul> Elementnummer <li> Element hinzufügen Waren angezeigt werden soll. Alle Waren, hat einen Namen und Preis Eigenschaften, die in der <p> Element enthalten ist.

Erstellen Sie einen Einkaufswagen

	<Div class = "Warenkorb">
		<H1> Warenkorb </ h1>
		<Table id = "cartcontent" style = "width: 300px; height: auto;">
			<Thead>
				<Tr>
					<Th Feld = "name" width = 140> Name </ th>
					<Th field = "Quantität" width = 60 align = "right"> Menge </ th>
					<Th field = "Preis" width = 60 align = "right"> Preis </ th>
				</ Tr>
			</ Thead>
		</ Table>
		<P class = "total"> Total: $ 0 </ p>
		<H2> Hier ablegen, den Warenkorb </ h2> hinzufügen
	</ Div>

Wir verwenden das Datenraster (Datagrid), um die Artikel im Warenkorb angezeigt werden soll.

Ziehen Sie den Klon von Waren

	$ ( '. Item'). Ziehbare ({
		zufällt: true,
		Proxy: "Klon",
		OnStartDrag: function () {
			. $ (This) .draggable ( 'Optionen') Cursor = 'nicht-erlaubt ";
			. $ (This) .draggable ( "Proxy") css ( 'z-index', 10);
		},
		onStopDrag: function () {
			. $ (Diese) .draggable ( 'Optionen') Cursor = 'move';
		}
	});

Bitte beachten Sie, dass wir Attributwert aus dem "Proxy" ziehbar ist auf "Klon", so das Schleppelement durch Klonen erzeugt.

Platzieren Sie Elemente auswählen in den Warenkorb

	$ ( '. Wagen'). Dropfähig ({
		OnDragEnter: function (e, Quelle) {
			. $ (Quelle) .draggable ( 'Optionen') Cursor = 'auto';
		},
		OnDragLeave: function (e, Quelle) {
			. $ (Quelle) .draggable ( 'Optionen') Cursor = 'nicht-erlaubt ";
		},
		onDrop: function (e, Quelle) {
			. Var name = $ (Quelle) .find ( 'p: eq (0)') html ();
			. Var Preis = $ (Quelle) .find ( 'p: eq (1)') html ();
			addProduct (Name, parseFloat (price.split ( '$') [1]));
		}
	});
	var data = { "total": 0, "Zeilen": []};
	var Totalcost = 0;
	Funktion addProduct (Name, Preis) {
		Funktion add () {
			for (var i = 0; i <data.total; i ++) {
				var row = data.rows [i];
				if (row.name == name) {
					row.quantity + = 1;
					Rückkehr;
				}
			}
			data.total + = 1;
			data.rows.push ({
				Name: Name,
				Menge: 1,
				Preis: Preis
			});
		}
		add ();
		Totalcost + = Preis;
		. $ ( '# Cartcontent') Datagrid ( "loaddata", Daten);
		$ ( 'Div.cart .total') html ( 'Total: $' + Totalcost) ;.
	}	

Jedes Mal, wenn die Platzierung von Waren, erhalten wir die ersten Namen und Rohstoffpreise, und rufen Sie dann 'addProduct' Funktion, um den Warenkorb zu aktualisieren.

Download von jQuery EasyUI Beispiele

jeasyui-dd-shopping.zip