1

我对 jquery 很陌生。目前我正在做一个购物车项目，其中有三种类型的物品（item1，item2，item3）和三个袋子（bag1，bag2，bag3）和一个购物车，例如 bag1 接受 item1，item2，item3，bag2 接受item2、item3 和 bag3 仅接受我目前开发的 drop item3。

现在我想添加额外的功能，例如用户应该首先选择（单击）任何一个包（例如 bag1），然后尝试将物品放入 bag1，这样其他两个包丢弃功能应该被禁用（其他包不应该接受任何物品，即使该袋子可以接受），如果用户选择其他袋子，也可以反转。

请尝试一下。我真的需要帮助。

http://jsfiddle.net/Vwu37/15/

html

<div class="bag1" ><p>bag1</p></div>
<div class="bag2" > <p>bag2</p></div>
<div class="bag3" ><p>bag3</p></div>
<div class="item1"><p>item1_1</p></div>
<div class="item1"><p>item2_1</p></div>
<div class="item1"><p>item2_1</p></div>

js

$('.bag1').droppable({
                accept: '.item1,.item2,.item3',
                 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]));
                }
            });

            $('.bag2').droppable({
                accept: '.item2,.item3',
                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();
                   }
            });

            $('.bag3').droppable({
                accept: '.item3',
                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();
                                    }
            });
4

1 回答 1

0

这是为bag1执行此操作的一种非常简单的方法：jsfiddle 注意，目前我刚刚做了：

$('.bag1').click(function(){
//disabling other droppables here
});

您可能需要删除此硬代码并编写更通用的方法来禁用您的包。我建议您通过可拖动和可放置的jquery.ui api 方法，找到最适合您需求的方法。因为您可以通过检查使用的拖放项目和放置袋来防止在放置时立即放置。

更新：
开始时，这里的行李箱都被禁用了。如果您单击其中任何一个，它将再次启用并可以放置。

于 2013-07-31T09:45:29.020 回答