javascript - 如何允许用户单击可放置的 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(){
//在此处禁用其他可放置项
});

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

更新:
开始时，行李托运全部被禁用 here 。如果您单击其中任何一个，它将再次启用并可删除。