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.

Code:
$('.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");

});
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!