jQuery EasyUI 拖放 - 创建拖放的购物车

本节将展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面，当拖到和放置物品时，购物篮中的物品和价格将相应更新。

显示页面上的商品

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

如上代码，添加一个包含一些<li>元素的<ul>元素来显示商品。所有商品都有名字和价格属性，它们包含在<p>元素中。

创建购物车

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

使用数据网格（datagrid）来显示购物篮中的物品。

拖动克隆的商品

 $('.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';
    }
  });

注意，把draggable属性的值从'proxy'设置为'clone'，所以拖动元素将由克隆产生。

放置选择商品到购物车中

 $('.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); 
   }

每当放置商品的时候，首先得到商品名称和价格，然后调用'addProduct'函数来更新购物篮。