jQuery EasyUI 拖放 – 创建拖放的购物车

jQuery EasyUI 拖放 – 创建拖放的购物车

使用 jQuery EasyUI 的 draggable 和 droppable 插件，可以轻松实现一个交互式的拖放购物车应用。用户可以将商品图片拖动到购物车区域，系统自动添加商品、更新数量（重复拖动时增加数量）和总价。

这个示例模拟一个简单的购物页面：左侧显示商品列表，右侧是购物车（使用 datagrid 显示购物篮内容，并实时计算总价）。

官方教程参考：https://www.jeasyui.com/tutorial/dd/dnd2.php
在线 Demo：https://www.jeasyui.com/tutorial/dd/dnd2_demo.html

步骤 1: 引入 EasyUI 资源

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 HTML 结构

左侧商品区（多个可拖动 div），右侧购物车区（包含 datagrid 和总价显示）。

<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:700px;padding:10px;">
    <div style="float:left;width:400px;">
        <div class="item">
            <img src="https://www.jeasyui.com/tutorial/dd/images/balloon.jpg" style="width:100px;height:100px;"><br>
            Balloon<br>Price:$25
        </div>
        <div class="item">
            <img src="https://www.jeasyui.com/tutorial/dd/images/feeling.jpg" style="width:100px;height:100px;"><br>
            Feeling<br>Price:$25
        </div>
        <div class="item">
            <img src="https://www.jeasyui.com/tutorial/dd/images/elephant.jpg" style="width:100px;height:100px;"><br>
            Elephant<br>Price:$25
        </div>
        <div class="item">
            <img src="https://www.jeasyui.com/tutorial/dd/images/stamps.jpg" style="width:100px;height:100px;"><br>
            Stamps<br>Price:$25
        </div>
        <div class="item">
            <img src="https://www.jeasyui.com/tutorial/dd/images/monogram.jpg" style="width:100px;height:100px;"><br>
            Monogram<br>Price:$25
        </div>
    </div>

    <div class="cart" style="float:right;width:280px;">
        <h1>Shopping Cart</h1>
        <div style="background:#fff">
            <table id="cartcontent" class="easyui-datagrid" fitColumns="true" style="width:280px;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>
        </div>
        <p class="total">Total: $0</p>
        <h2>Drop here to add to cart</h2>
    </div>
    <div style="clear:both"></div>
</div>

<style>
    .item {
        width:120px;
        height:180px;
        float:left;
        margin:10px;
        text-align:center;
        cursor:pointer;
        border:1px solid #ccc;
        padding:10px;
        background:#fafafa;
    }
    .cart {
        border:2px dashed #aaa;
        padding:10px;
        height:400px;
    }
</style>

步骤 3: JavaScript 实现拖放逻辑

核心：使商品可拖动（clone 代理），购物车可放置；放置时提取商品信息，更新 datagrid 和总价。

<script type="text/javascript">
    var data = {"total":0,"rows":[]};
    var totalCost = 0;

    $(function(){
        $('#cartcontent').datagrid({
            singleSelect:true
        });

        $('.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('img').next().text();  // 商品名称
                var price = parseFloat($(source).find('img').next().next().text().substr(7));  // 提取价格

                addProduct(name, price);
            }
        });
    });

    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;
                    row.price += price;
                    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);
    }
</script>

关键说明

• 拖动效果：使用 proxy:'clone'，拖动时显示克隆代理，原商品不动。
• 视觉反馈：拖入/拖出购物车时改变光标。
• 添加逻辑：如果同名商品已存在，增加数量和价格；否则新增一行。
• 实时更新：使用 datagrid 的 loadData 刷新购物车，总价单独计算并显示。
• 优势：用户体验直观，支持重复添加商品自动累加。

扩展建议

• 添加“移除”按钮：在 datagrid 中添加操作列，支持删除行并扣减总价。
• 支持本地存储：使用 localStorage 保存购物车数据。
• 真实商品图片：替换示例图片为实际商品。

更多示例：

• 官方购物车 Demo：https://www.jeasyui.com/tutorial/dd/dnd2_demo.html
• 课程表拖放：https://www.jeasyui.com/tutorial/dd/dnd3.php

如果需要添加删除功能、完整源码下载、或结合后端持久化，请提供更多细节！