jquery easyui拖放购物车代码

发布时间:2020-02-12编辑:脚本学堂
分享一例jquery easyui实现的拖放购物车的代码,利用easyui的拖放能力可以轻松创建购物车,有需要的朋友参考下。

jquery easyui实现的购物车拖放功能,如下图:
jquery easyui 购物车拖放

1、显示产品HTML
 

复制代码 代码示例:
<ul class="products"> 
    <li> 
        <a href="#" class="item"> 
            <img src="shirt1.gif"/> 
            <div> 
                <p>Balloon</p> 
                <p>Price:$25</p> 
            </div> 
        </a> 
    </li> 
    <li> 
        <a href="#" class="item"> 
            <img src="shirt2.gif"/> 
            <div> 
                <p>Feeling</p> 
                <p>Price:$25</p> 
            </div> 
        </a> 
    </li> 
    <!-- other products --> 
</ul> 

2、购物车HTML:
 

复制代码 代码示例:
<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>

3、编写拖放代码:
 

复制代码 代码示例:
$('.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'; 
    } 
}); 
$('.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])); 
    } 
}); 

4、更新购物篮代码:
 

复制代码 代码示例:
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); 
}

原文参考:http://jquery-easyui.wikidot.com/tutorial:dnd2