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

Source: Internet
Author: User

<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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.