javascript - JQuery 维护多个拖放状态以保持元素的颜色与状态

Question

我有一个 Accordion 和两个允许用户放置元素的可放置区域。我想将 Accordion 内掉落元素的颜色更改为红色。你可以查看我的Fiddle here .

我用什么来改变 Accordion 内元素的颜色:

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