javascript - 如何允许用户单击可放置div，以便在单击可放置div后应禁用其他div的放置功能

我对jquery非常陌生。目前，我正在一个购物车项目中，其中有三种类型的商品（item1，item2，item3）和三个袋子（bag1，bag2，bag3），一个购物车（例如bag1）接受item1，item2，item3，bag2接受item2，item3和bag3仅接受我到目前为止开发的drop3 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();
                                    }
            });

最佳答案

这是为bag1做一个非常简单的方法：jsfiddle
请注意，目前，我只是这样做：

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

您可能需要删除此硬编码并编写一个更通用的方法来禁用您的行李包。
我建议您通过draggable和droppable jquery.ui api方法并找到最适合您需要的一种方法。因为您可以通过检查使用了什么拖曳物品和行李袋来防止在下落时立即下落。

更新：
在开始时，所有的托运行李都被禁用here。如果单击其中任何一个，它将变为启用状态并再次可放置。