jQuery EasyUI Arrastrar y soltar -Crear un carrito de compras con arrastrar y soltar

Si puede implementar fácilmente arrastrar y soltar en su aplicación web, sabrá que es algo especial. Con jQuery EasyUI, podemos implementar fácilmente la funcionalidad de arrastrar y soltar en aplicaciones web.

En este tutorial, le mostraremos cómo crear una página de carrito de compras que permita a los usuarios arrastrar y soltar los productos que desean comprar. Los artículos y precios de la cesta se actualizarán.

Mostrar los productos en la página

    <ul class="products">
        <li>
            <a href="../index.html" class="item">
                <img src="images/shirt1.gif.html"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="../index.html" class="item">
                <img src="images/shirt2.gif.html"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <!-- other products -->
    </ul>

Como puede ver en el código anterior, agregamos un elemento <ul> que contiene algunos elementos <li> para mostrar los productos. Todos los productos tienen atributos de nombre y precio, que se incluyen en elementos <p>.

Crear el carrito de compras

    <div class="cart">
        <h1>Shopping Cart</h1>
        <table id="cartcontent" style="width:300px;height:auto;">
            <thead>
                <tr>
                    <th field="name" width=140>Name</th>
                    <th field="quantity" width=60 align="right">Quantity</th>
                    <th field="price" width=60 align="right">Price</th>
                </tr>
            </thead>
        </table>
        <p class="total">Total: $0</p>
        <h2>Drop here to add to cart</h2>
    </div>

Usamos un DataGrid (datagrid) para mostrar los artículos de la cesta de compras.

Arrastrar productos clonados

    $('.item').draggable({
        revert:true,
        proxy:'clone',
        onStartDrag:function(){
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index',10);
        },
        onStopDrag:function(){
            $(this).draggable('options').cursor='move';
        }
    });

Tenga en cuenta que establecemos el valor de la propiedad draggable de 'proxy' a 'clone', por lo que el elemento arrastrado se generará mediante clonación.

Soltar los productos seleccionados en el carrito

    $('.cart').droppable({
        onDragEnter:function(e,source){
            $(source).draggable('options').cursor='auto';
        },
        onDragLeave:function(e,source){
            $(source).draggable('options').cursor='not-allowed';
        },
        onDrop:function(e,source){
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
        }
    });
    var data = {"total":0,"rows":[]};
    var totalCost = 0;
    function addProduct(name,price){
        function add(){
            for(var i=0; i<data.total; i++){
                var row = data.rows[i];
                if (row.name == name){
                    row.quantity += 1;
                    return;
                }
            }
            data.total += 1;
            data.rows.push({
                name:name,
                quantity:1,
                price:price
            });
        }
        add();
        totalCost += price;
        $('#cartcontent').datagrid('loadData', data);
        $('div.cart .total').html('Total: $'+totalCost);
    }    

Cada vez que se coloca un producto, primero obtenemos el nombre y el precio del producto, y luego llamamos a la función 'addProduct' para actualizar la cesta.

Descargar ejemplos de jQuery EasyUI

jeasyui-dd-shopping.zip