JQuery Object Design
<p>This is my current flow of JQuery:</p>

<ol>
<li>Object is created.</li>
<li>Object has a function called draw() which returns a string containing its HTML representation.</li>
<li>Container is created.</li>
<li>Container also has a function draw() which does the same thing.</li>
<li>Both the Object and Container are drawn to two separate divs using $('.class').append(...).</li>
<li>Object's div is made draggable, and Container's div is made droppable.</li>
</ol>

<p>The above works.  But the following is where I stumble:</p>

<p>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.</p>

<p>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?</p>

<p>EDIT: Ok, maybe I can abstract it a little bit better.</p>

<p>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.</p>

<p>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.</p>

<p>Now, relating back to my initial post:</p>

<p>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.</p>
