JQuery保持多個拖放狀態以保持項目的顏色與狀態

Question

我有一個手風琴和兩個可放置區域，允許用戶放置物品。我希望將手風琴內丟棄物品的顏色更改爲紅色。你可以檢查我的Fiddle here。

我用它來改變項目的顏色裏面手風琴：

sourceElement.css('color','#e62e00'); 

然後當刪除的項形式可投放區域改變顏色返黑：

$(".projLeader").on('click', '.closer', function(){ 
      var item = $(this).closest('.dropClass'); 

      var element = $("#myAccordion ul li").filter(function() { 
        return $(this).text() == item.text(); 
      }); 
      //$(this).droppable("enable"); 
      itm.splice(item); 
      element.css('color','black'); 
      item.fadeTo(200, 0, function(){ item.remove(); }) 
}); 

我要的是，如果例如，我將相同的物品放在兩個不同的可投放區域，然後刪除一個顏色應該仍然是紅色，直到我從另一個區域刪除物品。如何實現？

Answer 1

我已更新您的fiddle來處理此問題。

https://jsfiddle.net/ow29t4t7/12/

我所做的是，增加了data屬性，如下面的一滴水

var dropCount = sourceElement.data('dropCount'); 
sourceElement.data('dropCount', dropCount ? parseInt(dropCount) + 1 : 1); 

和檢查下同當它刪除，改變color如果zero到確保這在其他丟棄的框中不存在。

var dropCount = element.data('dropCount'); 
dropCount = dropCount && dropCount > 0 ? parseInt(dropCount) - 1 : 0; 
element.data('dropCount', dropCount); 
if(dropCount === 0) { 
    element.css('color','black'); 
}