jQuery EasyUI arrastre - arrastrar y soltar para crear un carrito de la compra
Si usted puede a través de sus aplicaciones web sencillas de implementar arrastrar y soltar, usted sabe algo especial. Por jQuery EasyUI, podemos simplemente arrastrar y soltar funcionalidad en las aplicaciones Web.
En este tutorial, le mostraremos cómo crear un usuario arrastrar y soltar elementos para permitir a los usuarios a comprar la página de carrito de compras. Cesta de los bienes y los precios se actualizará.
Las mercancías que aparecen en la página
<class = "productos" ul> <Li> <a href="#" class="item"> <Img src = "images / shirt1.gif" /> <Div> <P> Globo </ p> <P> Precio: $ 25 </ p> </ Div> </a> </ Li> <Li> <a href="#" class="item"> <Img src = "images / shirt2.gif" /> <Div> <P> Feeling </ p> <P> Precio: $ 25 </ p> </ Div> </a> </ Li> <! - -> Otros productos </ Ul>
Como se puede ver en el código anterior, añadimos una que contiene <ul> número de elemento <li> para mostrar la mercancía. Toda la mercancía tiene un nombre y propiedades de los precios, que se incluye en el elemento <p>.
Crear una cesta de la compra
<Div class = "carrito"> <H1> Compras </ h1> <Tabla de id = estilo "cartcontent" = "width: 300px; height: auto;"> <Culata en T> <Tr> <= Th Campo ancho "nombre" = 140> Nombre </ th> <Th Campo = "cantidad" width = 60 align = "right"> Cantidad </ th> <= Th campo "precio" width = 60 align = "right"> Precio </ th> </ Tr> </ Culata en T> </ Table> <P class = "total"> Total: $ 0 </ p> <H2> Excluir aquí para añadir a la cesta </ h2> </ Div>
Nosotros usamos la cuadrícula de datos (cuadrícula de datos) para mostrar los elementos de la cesta de la compra.
Arrastre el clon de mercancías
$ ( '. Punto'). Arrastrable ({ revertirá: true, Proxy: 'clon', onStartDrag: function () { . $ (this) .draggable ( "opciones") del cursor = "no-autorizados"; . $ (Este) .draggable ( "proxy") css ( 'z-index', 10); }, onStopDrag: function () { . $ (Este) .draggable ( "opciones") del cursor = "mover"; } });
Tenga en cuenta que se pueden arrastrar atributo de valor del "proxy" está ajustado a 'clon', por lo que el elemento de arrastre producido por clonación.
Coloque seleccionar elementos a la cesta de la compra
$ ( '. Compras'). Soltable ({ OnDragEnter: function (e, fuente) { . $ (Fuente) .draggable ( 'Opciones') del cursor = "auto"; }, OnDragLeave: function (e, fuente) { . $ (Fuente) .draggable ( 'Opciones') del cursor = 'no-permitido'; }, OnDrop: function (e, fuente) { . Nombre var = $ (fuente) .find ( 't: eq (0)') html (); . Var precio = $ (fuente) .find ( 't: eq (1)') html (); addProduct (nombre, parseFloat (price.split ( '$') [1])); } }); var data = { "total": 0, "filas": []}; var TotalCost = 0; addProduct función (nombre, precio) { la función add () { for (var i = 0; i <data.total; i ++) { fila var = data.rows [i]; si (== row.name nombre) { row.quantity + = 1; volver; } } data.total + = 1; data.rows.push ({ Nombre: nombre, Cantidad: 1, Precio: Precio }); } add (); TotalCost + = precio; . $ ( '# Cartcontent') cuadrícula de datos ( 'loadData', los datos); $ ( 'Div.cart .total') html ( 'Total: $' + TotalCost) ;. }
Siempre que la colocación de las mercancías, se obtiene el nombre y los productos básicos precios, y luego llamar a la función 'addProduct' para actualizar la cesta de la compra.