javascript - Creating custom avatars -

i'm starting project require users able create multiple custom avatars. this, want them able send images in inventory manipulation frame. within frame, users should able move , resize images - double clicking them remove image frame , sending inventory. right of manipulation frame, sortable list dictate z-index of corresponding item item @ top being in of manipulation frame. far, have this: http://jsfiddle.net/thaikhan/e3gd6/10/show/.

the list generates , sortable not affect z-index of image. also, code pretty buggy , images disappear off frame.

see jsfiddle here: http://jsfiddle.net/thaikhan/e3gd6/10/

here javascript code:

//click frame $('.inventory').on('click', 'img', function () { $(this).resizable({     aspectratio: 1,     autohide: true,     containment: "parent",     minheight: 50,     minwidth: 50 });  $(this).parent().appendto(".frame").draggable({     containment: "parent",     cursor: "move" });  refreshindexlist(); });  //double click out of frame $('.frame').on('dblclick', '.ui-draggable', function () {     $(this).appendto(".inventory");     $(this).draggable("destroy");     $("img", this).resizable("destroy").attr('style', '');     refreshindexlist(); });  //updates list items function refreshindexlist() {     var listitems = $('.frame').children().length;     $('#sortable').empty();     var titles = $(".frame img:nth-of-type(1)").attr('title');     (var count = 1; count <= listitems; count++) {         var title = $(".frame img").eq(count-1).attr('title');         var $li = $("<li class='ui-state-default'/>").text(title);         $('#sortable').append($li);     } }  //makes list sortable $(function () {     $("#sortable").sortable({         placeholder: "ui-state-highlight"     });     $("#sortable").disableselection(); });  //inventory grid $(function() {     $( "#grid" ).sortable();     $( "#grid" ).disableselection(); }); 

i novice in javascript , have received in getting far. hoping once again can receive community , figure out how have sortable list change z-index of item. additionally, if sees why it's buggy, please let me know.

ultimately, want able grab manipulation frame image_id's, locations, z-indices, , sizes , store in database. allow users return , edit avatar creations.

a thousand help!

create function editing z-index:

function zindex() {     var title = "";      var = 9999;     $(".ui-state-default").each(function () {         i--; //z-index position counter         title = $(this).text();          $(".frame img[title='" + title + "']").parent().css("z-index", i);     }); } 

call on adding img

$('.inventory').on('click', 'img', function () {     $(this).resizable({         aspectratio: 1,         autohide: true,         containment: "parent",         minheight: 50,         minwidth: 50     });      $(this).parent().appendto(".frame").draggable({         containment: "parent",         cursor: "move"     });      refreshindexlist();     zindex(); }); 

and use on mouseup (drop event emulation)

$("#sortable").mouseup(function () {     settimeout(function() {     zindex();}, 100); }); 

fiddle