Как разрешить пользователю щелкать на сбрасываемом элементе div таким образом, чтобы функция отбрасывания другого элемента div была отключена после нажатия на элемент сбрасываемого элемента div

Question

Я очень плохо знаком с JQuery. В настоящее время я работаю над проектом корзины покупок, в котором есть три типа товаров (item1,item2,item3) и три сумки (bag1,bag2,bag3), и одна корзина покупок, такая как bag1, принимает item1,item2,item3, bag2 принимает item2, item3 и bag3 принимают только item3 при выпадении, который я разработал до сих пор.

Теперь я хочу добавить дополнительные функции, например, пользователь должен сначала выбрать (щелкнуть) любую из сумок (например, bag1), а затем попытаться бросить предметы в сумку1 так, чтобы другие функции сбрасывания двух сумок были отключены (другие сумки не должны принимать любой предмет, даже если он приемлем для этой сумки), а также наоборот, если пользователь выбирает другую сумку.

Пожалуйста, попробуйте. Мне действительно нужна помощь.

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
});

Возможно, вам придется удалить этот жесткий код и написать более общий метод, чтобы отключить ваши сумки. Я бы посоветовал вам пройти через перетаскиваемые и сбрасываемые методы API jquery.ui и найти наиболее подходящий для вас. Так как вы можете предотвратить падение прямо в момент опускания, проверив, какой предмет для перетаскивания использовался.

Обновить:
На старте все мешки сбрасываются здесь. Если вы щелкнете по любому из них, он снова станет включенным и отключенным.