CODEWITHSUNDEEP
jquery
sdasdadas
sdasdadas

Reputation: 25096

JQuery Object Design

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.

Upvotes: 0

Views: 129

Answers (2)

hanzolo
hanzolo

Reputation: 1150

I think i'm understanding the question which is overcomplicatedly (lol!) stated..

Short Asnswer: Yes.

Explanation, you can access the items in the array by index, or by ID (if you give them one). the problem with the index is you have to manage the locations as the items are added (and removed?), which could probably be managed outside the 2 structures in a separate structure, but that's adding more unnecessary complexity.

I think you can drop your "objects" into the containers and then access the containers individually, however, unless there is some parent / child hierarchy, how would you know which container to get to? then as far as reading the items out of the container.. they will definitely be in the order they were "dropped" in, but unless you know what was "dropped" when, you'll never be able to guess the which items are which..

Now, if you know the content of the "droppable"(lol) objects, that content is in essance the unique id / content (assuming the content is distinct), because you can get to the targets by their content too

...oh well, after reading my post, i hope i've provided some clarification.. i think if you laid out what you were trying to achieve, it would be easier to understand why you're taking this approach..

Upvotes: 1

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

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.

Upvotes: 1

Related Questions