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

<linkhref="Content/easyui.css"rel="stylesheet"/>
<scriptsrc="scripts/jquery-2.1.0.min.js"></script>
<scriptsrc="scripts/jquery.easyui.min.js"></script>

Displaying products on the page:

<ulclass="products">
            <li>
                <ahref="#"class="item">
                    <imgsrc="Images/shirt1.gif"/>
                    <div>
                        <p>Balloon</p>
                        <p>Price:$26</p>
                    </div>
                </a>
            </li>
            <li>
                <ahref="#"class="item">
                    <imgsrc="Images/shirt2.gif"/>
                    <div>
                        <p>Feeling</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <ahref="#"class="item">
                    <imgsrc="Images/shirt3.gif"/>
                    <div>
                        <p>Elephant</p>
                        <p>Price:$125</p>
                    </div>
                </a>
            </li>
            <li>
                <ahref="#"class="item">
                    <imgsrc="Images/shirt4.gif"/>
                    <div>
                        <p>Stamps</p>
                        <p>Price:$625</p>
                    </div>
                </a>
            </li>
            <li>
                <ahref="#"class="item">
                    <imgsrc="Images/shirt5.gif"/>
                    <div>
                        <p>Monogram</p>
                        <p>Price:$425</p>
                    </div>
                </a>
            </li>
            <li>
                <ahref="#"class="item">
                    <imgsrc="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:

<divclass="cart">
            <h1>Shopping Cart</h1>
            <divstyle="background: #fff">
                <tableid="cartcontent"fitcolumns="true"style="width: 300px; height: auto;">
                    <thead>
                        <tr>
                            <thfield="name"width="140">Name</th>
                            <thfield="quantity"width="60"align="right">Quantity</th>
                            <thfield="price"width="60"align="right">Price</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <pclass="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 aboutDifference between MVC 3, MVC 4, MVC 5, and MVC 6