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

Question

我对 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();
                                    }
            });

Answer 1

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

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

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

更新：
在开始时，托运包都被禁用here。如果您单击其中任何一个，它将再次启用并可放置。