Easy to learn jquery plugin Easyui Easyui implement drag-and-drop merchandise placement cart _jquery

In this article, we'll show you how to create a shopping cart page that enables users to drag and place items they want to buy, and the items and prices in the basket will be updated and shared with the following details:

Effect Chart:

The specific code is as follows

Display the items on the page:

<ul class= "Products" >
 <li>
 <a href= "#" class= "item" >
  
  <div>
  <p>Balloon</p>
  <p>Price:$25</p>
  </div>
 </a>
 </li>
 <li>
 <a href= "#" class= "item" >
  
  <div>
  <p>Feeling</p>
  <p>Price:$25</p>
  </ div>
 </a>
 </li>
 <!--other products-->
</ul>

As you can see in the above code, we add a <ul> element that contains some <li> elements to display the product. All products have name and price attributes, which are included in the <p> element.
To create a shopping cart:

<div class= "cart" >
  
 

We use a data grid (DataGrid) to display items in the shopping basket.
to drag a cloned product:

$ ('. Item '). draggable ({
 revert:true,
 proxy: ' Clone ',
 onstartdrag:function () {
 $ (this). Draggable (' options '). cursor = ' not-allowed ';
 $ (this). Draggable (' proxy '). CSS (' Z-index ', ten);
 },
 onstopdrag:function () {
 $ (this). Draggable (' Options '). cursor= ' move ';
 }
};

Notice that we set the value of the Draggable property from ' Proxy ' to ' clone ', so the drag element will be generated by the clone.
put the selected items into the shopping 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<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);
} 

Whenever we place a product, we first get the name and price of the product, and then call the ' addproduct ' function to update the basket.

Easyui implementation of drag and drop merchandise to put the function of the cart is introduced to this, with this article for you to provide examples, I believe we should be very easy to implement the drag and drop of goods placed shopping cart module design, thank you for your reading.