javascript - 创建自定义头像

Question

我正在启动一个项目，该项目要求用户能够创建多个自定义头像。为此，我希望他们能够将库存中的图像发送到操作框架。在此框架内，用户应该能够移动图像并调整图像大小 - 双击它们以从框架中删除图像并将其发送回库存中。在操作框架的右侧，我想要一个可排序的列表，它将指示相应项目的 z 索引，顶部的项目位于操作框架的后面。到目前为止，我有这个: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