創建自定義頭像

Question

我開始一個項目，要求用戶能夠創建多個自定義頭像。爲此，我希望他們能夠將庫存中的圖像發送到操作框。在這個框架內，用戶應該能夠移動和調整圖像大小 - 雙擊它們可以從框架中移除圖像並將其發送回庫存。在操作框的右側，我想要一個可排序的列表，它將指定相應項目的z-index，頂部的項目位於操作框的後面。到目前爲止，我有這個：http://jsfiddle.net/Thaikhan/e3Gd6/10/show/。

該列表生成並排序，但不影響圖像的z索引。此外，代碼非常麻煩，並且圖像通常會消失。

見的jsfiddle這裏：http://jsfiddle.net/Thaikhan/e3Gd6/10/

下面是JavaScript代碼：

//Click into 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'); 
    for (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(); 
}); 

我在JavaScript中的新手和得到這個地步已經收到太多的幫助。我希望我能再次得到社區的幫助，並找出如何讓可排序列表更改項目的z-index。此外，如果有人看到爲什麼它是越野車，請讓我知道。最終，我希望能夠從操作框架中獲取image_id，它們的位置，z索引和它們的大小，並將它們全部存儲在數據庫中。這將有望讓用戶返回並編輯他們的頭像創作。

千謝謝您的幫助！

Answer 1

創建與編輯z-index的功能：

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

調用它加入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(); 
}); 

，並用它在鼠標鬆開（下降事件仿真）

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

FIDDLE