Home > DeveloperSection > Blogs > Build a Drag and Drop Shopping Cart using HTML5 & Jquery

Build a Drag and Drop Shopping Cart using HTML5 & Jquery


HTML JQuery  HTML5 
Ratings:
1 Comment(s)
 4253  View(s)
Rate this:

Build a Drag and Drop Shopping Cart using HTML5 & Jquery

Hi everyone in this blog, I’m explaining about HTML5 drag & drop event in jquery.

Description:

The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

If you can easily implement drag and drop with your web application, then you know you've got something special. With jQuery EasyUI, we have drag-drop capabilities in web application.

In this tutorial, we will show you how to build a shopping cart page which enables users to drag and drop the products they wish to buy. The shopping basket items and the price will be updated.

Firstly you can download these liberary and link in your project:

Download:  http://www.jeasyui.com

<link href="Content/easyui.css" rel="stylesheet" />

<script src="scripts/jquery-2.1.0.min.js"></script>

<script src="scripts/jquery.easyui.min.js"></script>

 

Displaying products on the page:

<ul class="products">

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt1.gif" />

                    <div>

                        <p>Balloon</p>

                        <p>Price:$26</p>

                    </div>

                </a>

            </li>

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt2.gif" />

                    <div>

                        <p>Feeling</p>

                        <p>Price:$25</p>

                    </div>

                </a>

            </li>

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt3.gif" />

                    <div>

                        <p>Elephant</p>

                        <p>Price:$125</p>

                    </div>

                </a>

            </li>

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt4.gif" />

                    <div>

                        <p>Stamps</p>

                        <p>Price:$625</p>

                    </div>

                </a>

            </li>

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt5.gif" />

                    <div>

                        <p>Monogram</p>

                        <p>Price:$425</p>

                    </div>

                </a>

            </li>

            <li>

                <a href="#" class="item">

                    <img src="Images/shirt6.gif" />

                    <div>

                        <p>Rolling</p>

                        <p>Price:$525</p>

                    </div>

                </a>

            </li>

        </ul>

 

As you can see in the code above, we add a <ul> element that contains some <li> elements to display the products. Every product has name and price properties which is contained inside the <p> element.

Build the cart:

<div class="cart">

            <h1>Shopping Cart</h1>

            <div style="background: #fff">

                <table id="cartcontent" fitcolumns="true" 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>

            </div>

            <p class="total">Total: $0</p>

            <h2>Drop here to add to cart</h2>

        </div>

 

We use the datagrid to show the shopping basket items.

Dragging the cloned product:

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

                }

            });

 

Notice that we set the draggable property 'proxy' to 'clone', so the dragged element will has clone effect.

 

Dropping the selected product in the 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]));

                }

            });

        });

 

        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);

        }

When dropping the product, we get the product name and price first, then call 'addProduct' function to update shopping basket.

 

Output:

in my next post i'll explain about Difference between MVC 3, MVC 4, MVC 5, and MVC 6


remove from cart

By manish hariyani on   5 months ago
As i m new to jquery. so i want to make function and buttton for remove from  cart. so pls help me to do so. replay as soon as possible

Don't want to miss updates? Please click the below button!

Follow MindStick