Question

This is my current flow of JQuery:

1. Object is created.
2. Object has a function called draw() which returns a string containing its HTML representation.
3. Container is created.
4. Container also has a function draw() which does the same thing.
5. Both the Object and Container are drawn to two separate divs using $(‘.class’).append(…).
6. Object’s div is made draggable, and Container’s div is made droppable.

The above works. But the following is where I stumble:

The Container container contains an array of Objects. When a user drops an Object div onto the Container div, I want to add that Object into the Container array.

Is my only option to add a unique ID to each Object, create the Object div with that ID, drop the Object onto the Container div with a unique Container ID, and then perform a lookup on both of the IDs?

EDIT: Ok, maybe I can abstract it a little bit better.

I have trading cards and card packs on the screen. The trading cards are little square boxes with a picture of the monster, and the card packs are small grey boxes. When you drop a trading card onto the card pack, the trading card disappears and inside the card pack a small image of the trading card is placed.

So each card pack has a container of trading cards. Each object TradingCard and CardPack has a .draw() method that creates a string of HTML representing how that object is drawn. Then you can append that string to any object on the screen using JQuery.

Now, relating back to my initial post:

The TradingCard is draggable, and the CardPack is droppable. When a TradingCard is dropped onto a CardPack, a function inside JQuery’s droppable is called. I want that function to add that TradingCard to the CardPack’s array.

Answer 1

I’m not sure if I’m following you completely, but something like this should work, as best as I can understand your question:

// [object] has this general structure
var obj = {
    draw : function () {
        return $('<p></p>');
    }
};

// [container] has this general structure
var container = {
    objects : [],
    draw : function () {
        var el = $('<div></div>');
        $.each(this.objects, function (v,i) {
            el.append(v.draw());
        });

        return el;
    }
};

so that you can use those in this manner:

// where foo and bar are [object]s
container.objects.push(foo);
container.objects.push(bar);

$('#main').append(container.draw());

But then again, I may just be misunderstanding you here.