jQuery EasyUI 拖放 - 創建拖放的購物車

如果您能夠通過您的 Web 應用簡單地實現拖動和放置，您就會知道一些特別的東西。通過 jQuery EasyUI，我們在 Web 應用中可以簡單地實現拖放功能。

在本教程中，我們將向您展示如何創建一個啟用用戶拖動和放置用戶想買的商品的購物車頁面。購物籃中的物品和價格將更新。

顯示頁面上的商品

    <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' 函數來更新購物籃。