How to allow the user to click on a droppable div such that the other div's dropping functionality should be disabled after clicking a droppable div

Question

I am very new to jquery. Presently i am working on a project of shopping cart where there are three types of items(item1,item2,item3) and three bags(bag1,bag2,bag3) and one shopping cart such as bag1 accepts item1,item2,item3 , bag2 accepts item2,item3 and bag3 accepts only item3 on drop which I have developed so far.

Now i want to add additional functionality such as the user should first select(click) any one of the bag(example bag1) and then try dropping items into the bag1 such that other two bags dropping functionality should be disable(other bags should not accept any item even if it is acceptable by that bag) and also reverse if user selects other bag.

please try it.I really need help.

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

Here`s a very simple way to do it for bag1: jsfiddle Note, that, currently I just did:

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

You may need to remove this hardcode and write a more generic method to disable your bags. I`d suggest you go through draggable and droppable jquery.ui api methods and find the one most appropriate for your needs. As you may prevent dropping right at the drop moment by checking what drag item and drop bag was used.

Update:
At start drop bags are all disabled here. If you click any of them it will become enabled and droppable again.