In this fiddle http://jsfiddle.net/mjmitche/6nar4/3/, if you drag, for example, the little blue box into the yellow box, then the big black box will turn pink. All of the 4
I would go with such code:
var oBox = $("#blackbox");
var curClass = oBox.attr("class");
var newClass = (curClass == "bg_black") ? "bg_pink" : "bg_black";
oBox.removeClass().addClass(newClass);
To have it working, you first have to change your CSS and remove the background
from the #blackbox
declaration, add those two classes:
.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }
And assign the class bg_black
to the blackbox
element initially.
Updated jsFiddle: http://jsfiddle.net/6nar4/17/
In my opinion it's more readable than the other answers but it's up to you to choose of course.