Question

I am using the below jsfiddle

http://jsfiddle.net/hP3jc/

I need to somehow figure out a counter to tell me how many/which red blocks are placed on the which grey boxes below (as the grey boxes will be representing a value)

Any help /input will be much appreciated!

---

Updated: http://jsfiddle.net/hP3jc/1/ (includes an example counter template for count to increment 1 and go down by 1. All i need is coding now.

Answer 1

OK, I have part of it now.

        $('.selector1, .selector2, .selector3, .selector4, .selector5').droppable({
            hoverClass: 'hovered',
            drop: function (event, ui) {
                $(this).addClass(ui.draggable.attr("class"));
                CountClasses($(this));
            }
        });
    function CountClasses($this) {
        var classes = $this.attr("class").split(" ");
        var count = 0;
        var t = 0;

        for (t = 0; t < classes.length; t++)
        {
            if (classes[t].substring(0, 6) == "option") {
                count++;
            }
        }
        alert(count);
    }

This should serve as a starting point for you.

Now, all you need to do, is when you pick up a red box, remove its class from all .selector boxes. You can use a simple jQuery selector to find all selector boxes with that class.

$(".selector.option1").each(function(){
  $(this).removeClass(".option1");
});

I think the above should work though it’s untested.

Does this make some sense?

edit

Add this to your .draggable({ code to get the class of the red box. This is where the code should go to remove that class from all .selector boxes.

start: function () {  alert( $(this).attr("class").split(" ")[0]) }

edit 2

http://api.jquery.com/attribute-starts-with-selector/

This shows you how to select on a partial name.

so $("div[class^="selector"].optionX").each....

very untested but looks close