Building a drag-drop shopping cart

Tutorial » Building a drag-drop shopping cart

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.

View Demo

Displaying products on the page:

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:

We use the datagrid to show the shopping basket items.

Dragging the cloned product:

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

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

Download the EasyUI example:

easyui-shopping-demo.zip