jQuery EasyUI arraste - arrastar e soltar para criar um carrinho de compras

Se você pode através de seus aplicativos da Web simples para implementar arrastar e soltar, você sabe que algo especial. Por jQuery EasyUI, podemos simplesmente arrastar e soltar funcionalidade em aplicações Web.

Neste tutorial, vamos mostrar-lhe como criar um usuário arraste e solte itens para permitir aos utilizadores comprar o carrinho de compras página. carrinho de compras de bens e preços serão atualizados.

Produtos exibidos na página

	<ul class = "produtos">
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt1.gif" />
				<Div>
					<P> Balloon </ p>
					<P> Preço: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<Li>
			<a href="#" class="item">
				<Img src = "images / shirt2.gif" />
				<Div>
					<P> O sentimento </ p>
					<P> Preço: $ 25 </ p>
				</ Div>
			</a>
		</ Li>
		<! - Outros produtos ->
	</ Ul>

Como você pode ver no código acima, nós adicionamos um contendo <ul> número do elemento <li> elemento para exibir mercadoria. Toda a mercadoria tem um nome e propriedades de preços, que está incluído no elemento <p>.

Criar um carrinho de compras

	<Div class = "carrinho">
		<H1> Compras </ h1>
		<Table id = "cartcontent" style = "width: 300px; height: auto;">
			<Thead>
				<Tr>
					<Field = "nome" width Th = 140> Nome </ th>
					<Th field = "quantidade" width = 60 align = "right"> Quantidade </ th>
					<Th campo = largura "preço" = 60 align = "right"> Preço </ th>
				</ Tr>
			</ Thead>
		</ Table>
		<P class = "total"> Total: $ 0 </ p>
		<H2> Solte aqui para adicionar ao carrinho </ h2>
	</ Div>

Nós usamos a grade de dados (datagrid) para exibir os itens no carrinho de compras.

Arraste o clone de mercadorias

	$ ( '. Item'). Draggable ({
		revertem: true,
		proxy: 'clone',
		OnStartDrag: function () {
			. $ (this) .draggable ( "opções") cursor = 'não-autorizados ";
			. $ (Este) .draggable ( "proxy") css ( 'z-index', 10);
		},
		onStopDrag: function () {
			. $ (Este) .draggable cursor ( "opções") = 'move';
		}
	});

Por favor note que nós Draggable valor do atributo do 'proxy' estiver definido como "clone", de modo que o elemento de arrasto produzido por clonagem.

Coloque selecionar itens ao carrinho de compras

	$ ( '. Cart'). Droppable ({
		OnDragEnter: function (e, de origem) {
			. $ (Fonte) .draggable ( 'opções') cursor = 'auto';
		},
		OnDragLeave: function (e, de origem) {
			. $ (Fonte) .draggable ( 'opções') cursor = 'não-autorizados ";
		},
		onDrop: function (e, de origem) {
			. Html ();: ( 'eq (0) p') Var name = $ (fonte) .find
			. Var preço = $ (fonte) .find ( 'p: eq (1)') html ();
			addProduct (nome, parseFloat (price.split ( "$") [1]));
		}
	});
	var data = { "total": 0, "linhas": []};
	var custoTotal = 0;
	addProduct função (nome, preço) {
		add function () {
			for (var i = 0; i <data.total; i ++) {
				var carreira = data.rows [i];
				if (row.name == nome) {
					row.quantity + = 1;
					retornar;
				}
			}
			data.total + = 1;
			data.rows.push ({
				Nome: nome,
				Quantidade: 1,
				Preço: Preço
			});
		}
		add ();
		custoTotal + = preço;
		. $ ( '# Cartcontent') datagrid ( 'loadData', de dados);
		$ ( 'Div.cart .Total') html ( "Total: $ '+ custoTotal) ;.
	}	

Sempre que a colocação de produtos, temos o primeiro nome e preços de commodities, e, em seguida, chamar a função 'addProduct' para atualizar a cesta de compras.

Baixar exemplos jQuery EasyUI

jeasyui-dd-shopping.zip