如何讓用戶點擊一個可放置的div，使其他div的放置功能在點擊可放棄的div後應該被禁用

Question

我對jquery很新穎。目前我正在研究一個購物車項目，其中有三種類型的商品（item1，item2，item3）和三個包（bag1，bag2，bag3）和一個購物車（如bag1）接受item1，item2，item3，bag2接受item2，item3和bag3只接受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

Here`sa非常簡單的方式來做到這一點對BAG1：jsfiddle 。注意，目前我只是做：

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

您可能需要刪除此硬編碼，寫的比較通用的方法來禁用你的行李。 我建議你通過draggable和droppable jquery.ui api方法並找到一個最適合您的需求的方法。因爲您可以通過檢查使用的拖放項目和拖放包來防止在拖放時拖放。

更新：
在開始滴袋時都是禁用here。如果您點擊其中的任何一個，它將變爲啓用並再次丟棄。