JQuery Easyui using tutorials to create a drag-and-drop shopping cart

<jquery Easyui Latest version download >

If you can easily drag and drop using your Web application, then you must know something special, using jquery Easyui, we can simply implement drag-and-drop functionality in a Web application.

In this tutorial, we'll show you how to create a page where users can drag and drop the items they want to buy into the shopping cart. Items and prices in the shopping cart will be updated.

View Demo

Show items on the page:

< ul class = "products" > < li > < a href = "#" class = "item" > < img src = "images/shirt1.gif" > < div > < p >Balloon</ p > < p >Price:$25</ 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 > <!-- other products --> </ ul >

As you can see in the code above, we've added a UL element that contains some of the LI elements to display the product. The name and price attributes of each item are included in the P element.

To create a shopping cart:

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

We use data grids to display items in our shopping cart.

Drag the copied item:

$( ‘.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 drag element will have a copy effect.

Place the selected item 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])); } }); var data = { "total" :0, "rows" :[]}; var totalCost = 0; function addProduct(name,price){ function add(){ for ( var i=0; 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 the product is placed, we first get the name and price of the product, and then call the ' addproduct ' function to update the cart.

Download the Easyui example: Easyui-shopping-demo.zip

interested friends can click to see more articles about jquery Easyui !

JQuery Easyui using tutorials to create a drag-and-drop shopping cart