EasyUI ---- draggable购物车

@{
    ViewBag.Title = "Easyui_draggable";
    Layout = "~/Views/Shared/Layouts.cshtml";
}

<style type="text/css">
    .products{
        overflow:auto;
        height:100%;
        background:#fafafa;
    }

    .products ul{
        list-style:none;
        margin:0;
        padding:0;
    }

    .products li{
        display:inline;
        float:left;
        margin:10px;
        border:1px solid #ff0000;
    }

    .item{
        display:block;
        text-decoration:none;
    }

    .item img{
        100px;
        height:100px;
    }

    .cart {
        height:1000px;
        300px;
        float:right;
    }
    
</style>
<script type="text/javascript">
    $(function () {
        $("#cartcontent").datagrid({
            singleSelect:true,//单行选中
            showFooter:true//显示页脚
        });
    })

    $(".item").draggable({
        revert: true,//如何使true，在拖动的元素会返回到其实位置
        proxy: 'clone',//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('RMB')[1]));
        }
    });

    function addProduct(name,price) {
        var dg = $("#cartcontent");
        var data = dg.datagrid('getData');
        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();
        dg.datagrid('loadData', data);
        var cost = 0;
        var rows = dg.datagrid('getRows');
        for (var i = 0; i < rows.length; i++) {
            cost += rows[i].price * rows[i].quantity;
        }
        dg.datagrid('reloadFooter', [{ name: '总计', price: cost }]);
    }


</script>


<h2>购物车</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
    <div class="cart">
         <div class="ctitle">购物车</div>
         <div style="background:#fff">
             <table id="cartcontent" fitColumns="true" style="250px; height:auto;">
                 <thead>
                     <th field="name" width="140">商品名称</th>
                     <th field="quantity" width="60">数量</th>
                     <th field="price" width="60">价格</th>
                 </thead>
             </table>
         </div>
        <div class="ctitle" style="position:absolute;bottom:40px">把商品拖到这里添加到购物车</div>
    </div>
    <div class="products">
        <ul>
            <li>
                <a href="#" class="item">
                    <img src="~/Iamge/1.png" />
                    <div>
                        <p>气球</p>
                        <p>价格：RMB25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="~/Iamge/1.png" />
                    <div>
                        <p>气球</p>
                        <p>价格：RMB25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="~/Iamge/2.png" />
                    <div>
                        <p>气球</p>
                        <p>价格：RMB25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="~/Iamge/3.png" />
                    <div>
                        <p>气球</p>
                        <p>价格：RMB25</p>
                    </div>
                </a>
            </li>
        </ul>

    </div>

</div>

只能作参考，运行不起来。