Yevgeniy Bagackiy Yevgeniy Bagackiy - 1 year ago 71
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:


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();
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 Source

I have updated your fiddle to handle this.

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

var dropCount ='dropCount');'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 ='dropCount');
dropCount = dropCount && dropCount > 0 ? parseInt(dropCount) - 1 : 0;'dropCount', dropCount);
if(dropCount === 0) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download