jQuery EasyUI Drag and Drop - Creating a Drag-and-Drop Shopping Cart

If you can implement drag and drop simply through your web application, you know something special. With jQuery EasyUI, we can easily implement drag-and-drop functionality in our web applications.

In this tutorial, we will show you how to create a shopping cart page that allows users to drag and drop items they want to buy. The items and prices in the shopping basket will be updated.

Displaying Products on the Page

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

As you can see from the code above, we added a <ul> element containing some <li> elements to display the products. All products have name and price attributes, which are contained within <p> elements.

Creating the Shopping Cart

<div class="cart">
    <h1>Shopping Cart</h1>
    <table id="cartcontent" style="width:300px;height:auto;">
        <thead>
            <tr>
                &lt;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>

We use a datagrid to display the items in the shopping basket.

Dragging Cloned Products

$('.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';
    }
});

Note that we set the draggable property value to 'clone', so the dragging element will be cloned.

Dropping Selected Products into the Shopping Cart

$('.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);
}

Whenever a product is dropped, we first get the product name and price, then call the 'addProduct' function to update the shopping basket.

Download jQuery EasyUI Example

jeasyui-dd-shopping.zip