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

元素中。

  

        Shopping Cart
        
            
                
                    Name
                    Quantity
                    Price
                
            
        
        
Total: $0
        Drop here to add to cart
    

我们使用数据网格（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