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（drop event emulation）上使用它

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

FIDDLE

创建自定义头像

1 个答案: