使用easyUI创建一个拖放的购物车

@author YHC

如果你能够简单的实现拖动和放置在你的web应用中,然后你知道你有一些特别的东西,使用 jQuery EasyUI我们在我们的应用中可以简单的实现拖动和放置.

在这个教程中我们将向你展示如何创建一个购物车页面启用用户拖动和放置用户想买的商品,购物栏和价格将更新.

 查看Demo

显示 商品在页面:

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

你可以看见以上代码,我们添加一个 <ul>元素包含一些 <li>元素去显示商品,所有商品都有名字和价格属性,他们包含在<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'函数更新购物栏.

下载 EasyUI 示例代码:

easyui-shopping-demo.zip