创建自定义头像

Question

我正在启动一个项目，该项目要求用户能够创建多个自定义头像。为此，我希望他们能够将库存中的图像发送到操作框架。在这个框架内，用户应该能够移动和调整图像大小——双击它们以从框架中删除图像并将其发送回他们的库存。在操作框架的右侧，我想要一个可排序的列表，它将指示相应项目的 z-index，顶部的项目位于操作框架的后面。到目前为止，我有这个：http://jsfiddle.net/Thaikhan/e3Gd6/10/show/。

列表生成并可排序，但不影响图像的 z-index。此外，代码有很多错误，图像通常会从框架中消失。

在此处查看 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();
});

并在 mouseup 上使用它（放置事件模拟）

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

FIDDLE