1. Home
  2. jQuery EasyUI drag - przeciągnij i upuść, aby stworzyć koszyk

Najlepszy samouczek jQuery EasyUI drag - przeciągnij i upuść, aby stworzyć koszyk W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI drag - przeciągnij i upuść, aby stworzyć koszyk

Jeśli można w aplikacjach sieci Web proste do wdrożenia przeciągnij i upuść, wiesz coś specjalnego. Przez jQuery EasyUI, możemy po prostu przeciągnij i upuść w aplikacjach WWW.

W tym tutorialu pokażemy, jak stworzyć przeciągnij i upuść elementy użytkownika, aby umożliwić użytkownikom kupić na stronie koszyka. Koszyk towarów i cen zostanie zaktualizowany.

Towar wyświetlana na stronie 

	<ul class = "produkty">
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt1.gif" />
				<Div>
					<P> Balon </ p>
					<P> Cena: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt2.gif" />
				<Div>
					<P> Uczucie </ p>
					<P> Cena: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - -> Inne produkty
	</ Ul>

Jak widać w powyższym kodem, dodamy zawierające <ul> Numer elementu <li> elementu, aby wyświetlić towar. Wszystko towar ma swoją nazwę i właściwości cen, który jest zawarty w elemencie <p>.

Tworzenie Koszyk 

	<Div class = "koszyk">
		<H1> Koszyk </ h1>
		<Table id = "cartcontent" style = "width: 300px; height: auto;">
			<THEAD>
				<Tr>
					<Th pole = "name" width = 140> Nazwa </ th>
					<Th pole = "ilość" width = 60 align = "right"> Ilość </ th>
					<Th pole = "cena" width = 60 align = "right"> Cena </ th>
				</ Tr>
			</ THEAD>
		</ Table>
		<P class = "total"> Suma: $ 0 </ p>
		<H2> Upuść tutaj, aby dodać do koszyka </ h2>
	</ Div>

Używamy siatki danych (datagrid), aby wyświetlić elementy w koszyku.

Przeciągnij klon towarów 

	$ ( '. Pozycja "). Draggable ({
		przywrócić: prawda,
		Pełnomocnik: "klon"
		onStartDrag: function () {
			. $ (this) .draggable ( "Opcje") Kursor = 'nie-wolno ";
			. $ (This) .draggable ( "Pełnomocnik") css ( 'z-index', 10);
		}
		onStopDrag: function () {
			. $ (This) .draggable ( "Opcje") Kursor = 'ruch';
		}
	});

Należy pamiętać, że wartość atrybutu Draggable z "proxy" jest ustawiony na "klon", a więc elementem oporu wytwarzanej przez klonowanie.

Umieść wybierz elementy do koszyka 

	$ ( '. Koszyk "). Droppable ({
		onDragEnter: function (e, źródło) {
			. $ (Źródło) ( "Opcje") .draggable kursora = 'auto';
		}
		onDragLeave: function (e, źródło) {
			. $ (Źródło) ( "Opcje") .draggable kursora = 'nie-wolno ";
		}
		onDrop: function (e, źródło) {
			. Var name = $ (źródło) .find ( 'p: eq (0) ") html ();
			. Var Cena = $ (źródło) .find ( 'p: eq (1) ") html ();
			addProduct (nazwa, parseFloat (price.split ( "$") [1]));
		}
	});
	var data = { "total": 0, "Wiersze": []};
	var TOTALCOST = 0;
	Funkcja addProduct (nazwa, cena) {
		Funkcja add () {
			for (var i = 0; i <data.total; i ++) {
				var row = data.rows [i];
				if (row.name == nazwa) {
					row.quantity + = 1;
					return;
				}
			}
			data.total + = 1;
			data.rows.push ({
				Nazwa: nazwa,
				ilość: 1,
				cena: cena
			});
		}
		add ();
		TOTALCOST + = cena;
		. $ ( '# Cartcontent') DataGrid ( "loaddata" danych);
		$ ( 'Div.cart .total') html ( "Total: $ '+ TOTALCOST) ;.
	}

Ilekroć umieszczenie towarów, otrzymujemy imię i cen surowców, a następnie wywołać funkcję "addProduct 'aktualizować koszyk.

Pobierz przykłady jQuery EasyUI

jeasyui-dd-shopping.zip

Hot Tutorials

Contact US

jQuery EasyUI drag - przeciągnij i upuść, aby stworzyć koszyk
10/30