Javascript title fetching and image layering

I have several questions and any help will be greatly appreciated!

Looking here: http://jsfiddle.net/Thaikhan/ANLUs/4/

I'm trying to make a system where items can be clicked in and out of a manipulable screen (dragged and re-sized) called .frame.

$('.inventory').on('click', 'img', function () {
$(this).resizable({
    aspectRatio: 1,
    containment: "parent",
    minHeight: 50,
    minWidth: 50
});

$(this).parent().appendTo(".frame").draggable({
    containment: "parent",
    cursor: "move"
});
});

$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).appendTo(".inventory");
    $(this).draggable("destroy");
    $("img", this).resizable("destroy");

});

Code (markup):

This part works, except for when they are double clicked back to .inventory, I would like the images to take on the css of ".inventory img {}" and reset their size, float left, not overlap, etc.

That's one part of my question. The second part deals with layering.

What I would like to do is populate a sortable list with the titles of the objects that are in .frame and have the order of the list items change the z-values of the images. Please see the Fiddle. I really don't know how to go about changing the z-values or fetching the titles to create the list.

Again, any help is super appreciated.

Thanks a million!

 

Lets see - the first part of your question is easy, just change this line:

    $("img", this).resizable("destroy");

Code (markup):

to

  $("img", this).resizable("destroy").attr('style','');

Code (markup):

Not entirely there yet, but at least the new function populates the list properly
http://jsfiddle.net/ANLUs/9/
I think that it wouldn't be too hard manipulating the z-index if you add some sort of ID to each list item - that way you can easily manipulate each element and be sure which one is on top. Remember that unless you have a lot of elements, this can probably be achieved by iterating through every element each time, instead of creating some complicated check for each item (just check through the list, get the order of IDs, and then apply a z-index based on their place in an array)

 

When it's all said and done, the inventory images will be populated with a subset of a greater set of hundreds of images stored in a SQL database. Each image will have a unique ID. Eventually I want to be able to save the ID's of the images in the frame, their positions, and their z-index values in a database so a user can save what they have created and come back to edit it. A single frame might include >50 images so I would like to handle layering in the sortable list fashion. Thank you so much for your help so far @PoPSiCLe !

 

I see. That will involve quite a bit more jQuery to get around, but it should be perfectly doable. Unfortunately, a JS-fiddle isn't really the best approach for such a project, as it's a lot to consider. But as long as each element has its own ID, and you can calculate each element's height and width, z-index etc. you can relatively easily store this in the database. For the z-index values, you need to send this back to the element in question (the img) via the sortable-functions callback - that should do it quite nicely.

 

Yeah, once I got the basic JS working I was going to switch over to the server to fiddle with the php. I'm still struggling to figure out what the callback function would look like, however. Between having to actively update the list on each click-in and dblclick-out and changing the z-indices, I'm pretty lost. I am also very novice in js. Thank you again for your help!

 

I was thinking that items, depending on their position in the list, could be given an absolute z-value. The first item would have a z-index of 1, the second, 2, and so on. This would have to be recalculated after every change to the list and may not be the best way to go about doing it. (I also have no idea how to code it...)

 

Question: will the list and number of images always be equal? Ie, 5 images, 5 items in the list, 10 images, 10 items in the list, and so on?

 

Yes, this is where I have it so far: http://jsfiddle.net/Thaikhan/Qcu65/4/

Just need to now make the order of the list effect the z-indices.

I was thinking that the code could, on click of a li in #sortable, grab the ID's, associate an number (1++) with them based on the order, and then apply that number to the corresponding z-index in the frame. However, there are a couple problems in doing it that way.

1. The way it's coded now, on addition or removal of an img, the list resets all changes made to it and reorders back to the order that the img were added to frame. So I guess changing the order of the list could change the order of the img in frame? I don't know how to do that... It may have to be completely redone...

2. I just realized that individuals will have >=1 numbers of the same item in their inventory. 5 hearts, for instance. So, when it is clicked out of the inventory, the system needs to be able to copy it, create a unique ID for it, create a unique Title for it (e.g. "Heart 3", to display in the #sortable list), and subtract one from the inventory item counter. To do so, a counter needs to be put on every item icon in the inventory where their are >1 to work with. I was thinking, as far as server efficiency, it would probably be best to do all of this locally, and then when a user hits a "Submit/Save" button, have the php not only save the frame (so ID's or names of same images have to be unique) but also re-save the inventory and each item's corresponding count. The inventory img list will be populated on load from a database query. I'm not sure how to store the quantity of each item.

I know that was a lot but thanks a million!

 

There are also problems with items disappearing out of frame. It seems that the relative positioning is pushing some things out when you remove an image after they have been moved.