使用jquery拖放图像并将图像还原到特定区域

时间：2013-06-30 06:20:14

标签： html5 jquery-ui jquery shopping-cart

我是jquery的新手。目前我正在开发一个网站，其中很少有图片必须拖到一个购物车中而在其他购物车中很少。

例如，第一个购物车和第二个购物车中的鞋子必须放下T恤 但反过来不应该发生（T恤不应该落入第二个购物车，鞋子不应该放在第一个购物车中）。

我开发了一部分代码，其中所有内容都放入两个购物车中 但只有一个购物车显示名称和价格。

我希望购物车显示名称和价格，但第一个购物车应该只接受衬衫和其他鞋子，并显示名称和价格。

试着解决我的问题。

这是我的代码

<!DOCTYPE html>
<html style="height:100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
<h2 style="width: 205px">Shopping Cart</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
    <br><br><br><br>
    <div class="cart1" style="left: 5px; top: 0px; height: 309px; bottom: 0px; width: 255px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
        <table id="cartcontent0" fitColumns="true" style="width1: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>
        </div>
        <div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
    </div>
    <br><br><br>
    <div class="cart" style="left: -9px; top: -62px; height: 309px; bottom: 62px; width: 269px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
        <table id="cartcontent" fitColumns="true" style="width1: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>
        </div>
        <div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
    </div>
    <div class="products" style="width: 203px; height: 277px;">
        <ul>
         <li>
                <a href="#" class="item">
                    <img src="images/shirt2.gif" height="107" width="85"/>
                    <div>
                        <p>Feeling</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt3.gif" height="86" width="81"/>
                    <div>
                        <p>Elephant</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt4.gif" height="84" width="76"/>
                    <div>
                        <p>Stamps</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>



<div class="productss" style="width: 203px; height: 277px;">
        <ul>
            <li>
                <a href="#" class="itemm">
                    <img src="images/shoes1.gif" height="93" width="108"/>
                    <div>
                        <p>puma</p>
                        <p>Price:$30</p>
                    </div>
                </a>
            </li>
            <li style="width: 122px; height: 126px">
                <a href="#" class="itemm">
                    <img src="images/shoes2.gif" height="84" width="102"/>
                    <div>
                        <p>puma</p>
                        <p>Price:$30</p>
                    </div>
                </a>
            </li>

            </ul>
            </div>
</div>

    <style type="text/css">
        .products{
            overflow:auto;
            height:100%;
            background:#fafafa;
        }
        .products ul{
            list-style:none;
            margin:0;
            padding:0px;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }

        .productss{
            overflow:auto;
            height:100%;
            background:#fafafa;
        }
        .productss ul{
            list-style:none;
            margin:0;
            padding:0px;
        }
        .productss li{
            display:inline;
            float:left;
            margin:10px;
        }

        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333;
        }
        .item p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }

        .itemm{
            display:block;
            text-decoration:none;
        }
        .itemm img{
            border:1px solid #333;
        }
        .itemm p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }

        .cart{
            float:right;
            position:relative;
            width:260px;
            height:100%;
            background:#ccc;
            padding:0px 10px;
        }
        .ctitle{
            text-align:center;
            color:#555;
            font-size:18px;
            padding:10px;
        }
    .cart1 {
        float: right;
        position: relative;
        width: 260px;
        height: 100%;
        background: #ccc;
        padding: 0px 10px;
            }
    .auto-style1 {
        margin-left: 10;
    }
    </style>
    <script>
        $(function(){
            $('#cartcontent').datagrid({
                singleSelect:true,
                showFooter:true
            });
            $('#cartcontent0').datagrid({
                singleSelect:true,
                showFooter: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';
                }
            });

            $('.itemm').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]));
                }
            });

            $('.cart1').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]));
                }
            });




        });

        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:'Total',price:cost}]);
        }

        function addProduct(name,price){
            var dg = $('#cartcontent0');
            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:'Total',price:cost}]);
        }

    </script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您定义function addProduct(name,price){两次不正确，您可以将第三项作为ID传递。要接受draggable中的特定droppable课程，请使用droppable的接受参数，例如accept: '.item'

更新后的代码如下：

<!DOCTYPE html>
<html style="height:100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
<h2 style="width: 205px">Shopping Cart</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
    <br><br><br><br>
    <div class="cart1" style="left: 5px; top: 0px; height: 309px; bottom: 0px; width: 255px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
        <table id="cartcontent0" fitColumns="true" style="width1: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>
        </div>
        <div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
    </div>
    <br><br><br>
    <div class="cart" style="left: -9px; top: -62px; height: 309px; bottom: 62px; width: 269px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
        <table id="cartcontent" fitColumns="true" style="width1: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>
        </div>
        <div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
    </div>
    <div class="products" style="width: 203px; height: 277px;">
        <ul>
         <li>
                <a href="#" class="item">
                    <img src="images/shirt2.gif" height="107" width="85"/>
                    <div>
                        <p>Feeling</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt3.gif" height="86" width="81"/>
                    <div>
                        <p>Elephant</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <img src="images/shirt4.gif" height="84" width="76"/>
                    <div>
                        <p>Stamps</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>



<div class="productss" style="width: 203px; height: 277px;">
        <ul>
            <li>
                <a href="#" class="itemm">
                    <img src="images/shoes1.gif" height="93" width="108"/>
                    <div>
                        <p>puma</p>
                        <p>Price:$30</p>
                    </div>
                </a>
            </li>
            <li style="width: 122px; height: 126px">
                <a href="#" class="itemm">
                    <img src="images/shoes2.gif" height="84" width="102"/>
                    <div>
                        <p>puma</p>
                        <p>Price:$30</p>
                    </div>
                </a>
            </li>

            </ul>
            </div>
</div>

    <style type="text/css">
        .products{
            overflow:auto;
            height:100%;
            background:#fafafa;
        }
        .products ul{
            list-style:none;
            margin:0;
            padding:0px;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }

        .productss{
            overflow:auto;
            height:100%;
            background:#fafafa;
        }
        .productss ul{
            list-style:none;
            margin:0;
            padding:0px;
        }
        .productss li{
            display:inline;
            float:left;
            margin:10px;
        }

        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333;
        }
        .item p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }

        .itemm{
            display:block;
            text-decoration:none;
        }
        .itemm img{
            border:1px solid #333;
        }
        .itemm p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }

        .cart{
            float:right;
            position:relative;
            width:260px;
            height:100%;
            background:#ccc;
            padding:0px 10px;
        }
        .ctitle{
            text-align:center;
            color:#555;
            font-size:18px;
            padding:10px;
        }
    .cart1 {
        float: right;
        position: relative;
        width: 260px;
        height: 100%;
        background: #ccc;
        padding: 0px 10px;
            }
    .auto-style1 {
        margin-left: 10;
    }
    </style>
    <script>
        $(function(){
            $('#cartcontent').datagrid({
                singleSelect:true,
                showFooter:true
            });
            $('#cartcontent0').datagrid({
                singleSelect:true,
                showFooter: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';
                }
            });

            $('.itemm').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({
                accept: '.item',
                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]), '#cartcontent');
                }
            });

            $('.cart1').droppable({
                accept: '.itemm',
                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]), '#cartcontent0');
                }
            });




        });

        function addProduct(name, price, dgId){
            var dg = $(dgId);
            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:'Total',price:cost}]);
        }

    </script>
</body>
</html>
相关问题
最新问题