JQuery EasyUI перетащить - перетаскивания для создания корзины покупок

Если вы можете с помощью веб-приложения просто реализовать функцию перетаскивания, вы знаете что-то особенное. По JQuery EasyUI, мы можем просто перетащить функциональность в веб-приложениях.

В этом уроке мы покажем вам, как создать пользователя перетаскивать элементы, чтобы позволить пользователям покупать странице корзины. Корзина товаров и цен будет обновляться.

Товары отображаются на странице

	<UL класс = "продукты">
		<Li>
			<a href="#" class="item">
				<IMG SRC = "Images / shirt1.gif" />
				<Div>
					<P> шар </ p>
					<P> Цена: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<Li>
			<a href="#" class="item">
				<IMG SRC = "Images / shirt2.gif" />
				<Div>
					<P> Feeling </ p>
					<P> Цена: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - Другие продукты ->
	</ UL>

Как вы можете видеть в приведенном выше коде, мы добавим, содержащий <UL> номер элемента <LI> элемент для отображения товаров. Весь товар имеет имя и свойства цена, которая входит в элемент <p>.

Создание Корзина

	<Div класс = "корзина">
		<H1> Корзина </ h1>
		<Таблица ID = "cartcontent" стиль = "ширина: 300px; высота: авто;">
			<THEAD>
				<Tr>
					<Th поле = "имя" ширина = 140> Имя </ й>
					<Th поле = "количество" ширина = 60 ALIGN = "правый"> Количество </ й>
					<Th поле = "цена" ширина = 60 ALIGN = "правый"> Цена </ й>
				</ TR>
			</ THEAD>
		</ Table>
		<P класс = "Общий"> Итого: $ 0 </ p>
		<H2> Падение здесь, чтобы добавить в корзину </ h2>
	</ Div>

Мы используем сетку данных (DataGrid) для отображения элементов в корзине.

Перетащите клон товаров

	$ ( '. П'). Draggable ({
		вернуться: правда,
		прокси: 'клон',
		onStartDrag: функция () {
			. $ (это) .draggable ( "Параметры") Курсор = 'не разрешенным';
			. $ (Это) .draggable ( 'прокси') CSS ( 'г-индекс', 10);
		},
		onStopDrag: функция () {
			. $ (Это) .draggable ( "Options") курсор = 'движение';
		}
	});

Обратите внимание, что мы Draggable значение атрибута из "прокси" установлен на "клон", так что элемент сопротивления, полученного путем клонирования.

Поместите выбирать элементы в корзине

	$ ( '. Корзина'). Droppable ({
		OnDragEnter: функция (е, источник) {
			. $ (Источник) .draggable ( "Параметры") Курсор = 'авто';
		},
		OnDragLeave: функция (е, источник) {
			. $ (Источник) .draggable ( "Параметры") Курсор = 'не разрешенным';
		},
		OnDrop: функция (е, источник) {
			. Var имя = $ (источник) .find ( 'р: экв (0)') HTML ();
			. Var цена = $ (источник) .find ( 'р: экв (1)') HTML ();
			addProduct (имя, parseFloat (price.split ( '$') [1]));
		}
	});
	вар данные = { "всего": 0, "строки": []};
	переменная TotalCost = 0;
	Функция addProduct (наименование, цена) {
		Функция Add () {
			для (вар я = 0; я <data.total; я ++) {
				переменная строка = data.rows [I];
				если (row.name == имя) {
					row.quantity + = 1;
					возвращение;
				}
			}
			data.total + = 1;
			data.rows.push ({
				Имя: имя,
				Количество: 1,
				цена:
			});
		}
		Добавить ();
		TotalCost + = цена;
		. $ ( '# Cartcontent') DataGrid ( 'LoadData', данные);
		$ ( 'Div.cart .total') HTML ( 'Total: $' + TotalCost) ;.
	}	

Всякий раз, когда размещение товаров, мы получаем первое название и товарные цены, а затем вызвать функцию "addProduct" обновить корзину покупок.

Скачать примеры Jquery EasyUI

jeasyui-dd-shopping.zip