Yevgeniy Bagackiy Yevgeniy Bagackiy - 10 days ago 7
CSS Question

JQuery Maintain multiple drag and drop state to keep color of the item with the state

I have an Accordion and two droppable areas where user is allowed to drop items. I want color of the dropped item inside an accordion to be changed to red. You can check my Fiddle here.

What I use to change color of the item inside accordion:

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


And then when remove the item form droppable area change color back to black:

$(".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(); })
});


What I want is if for example I dropped same item in two different droppable areas and then remove one color should be still red, until i remove item from another area. How it can be achieve?

Answer

I have updated your fiddle to handle this.

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

What I have done is, added a data attribute as below with the drop count

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

And checking the same as below when it removed and changing the color if it is zero to make sure this does not exist in other dropped boxes.

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