导致图像移动的jQuery UI错误

我有一把小提琴，我正计划将它整合到一个网站中：

演示的功能：

• 单击图像以将其发送到操纵帧中
• 双击要删除的图像
• 将列表向右排序以调整分层

问题是：当双击图像返回到较低的目录框时，图像通常会在操作框中跳跃。

如果所有的图像都放在操作帧中，中间叠加，一个通过双击删除，则可以触发问题。 我相信这可能是一个jQueryUI错误，但我不知道如何调试这个问题。我希望这里有人能帮我

以下是JSFIDLE：

以及javascript代码：

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

$('.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();
});

//Double Click out of Frame
$('.frame').on('dblclick', '.ui-draggable', function () {
    $(this).appendTo(".inventory");
    $(this).draggable("destroy");
    $("img", this).resizable("destroy").attr('style', '');
    refreshIndexList();
    zindex();
});

//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();
});

函数zindex（）{ var title=“”； var i=9999； $（“.ui状态默认值”）。每个（函数（）{ 我--； title=$（this.text（）； $（“.frame img[title='”+title+']”）.parent（）.css（“z-index”，i）； }); } $（“#可排序”）.mouseup（函数（）{ setTimeout（函数（）{ zindex（）；}，100）； }); $（'.inventory'）。在（'click'，'img'，函数（）{ $（此）。可调整大小({ 方面：1， 自动隐藏：对， 遏制：“家长”， 身高：50， 最小宽度：50 }); $（this.parent（）.appendTo（“.frame”）.draggable({ 遏制：“家长”， 光标：“移动” }); refreshIndexList（）； zindex（）； }); //双击帧外 $（'.frame'）.on（'dblclick'，'.ui draggable'，函数（）{ 美元（本）。附于（“.inventory”）； $（此）。可拖动（“销毁”）； $（“img”，this）.reshable（“destroy”）.attr（'style'，''）； refreshIndexList（）； zindex（）； }); //更新列表项 函数refreshIndexList（）{ var listitems=$（'.frame'）.children（）.length； $（“#可排序”）.empty（）； var titles=$（“.frame img:nth of type（1）”）.attr（'title'）；

---

对于（var count=1；count，这里的问题是jQuery UI可调整大小的小部件将图像包装在相对位置的div中。因为它们是位置：相对删除一个元素将移动文档中它下面所有元素的垂直位置。您可以通过添加：

.ui-draggable {
    position: absolute !important;
}

到您的CSS。请参阅

---

使用此修复方法，当项目添加到帧时，它们都将占据绝对位置0,0，因此它们将彼此重叠。如果您希望它们在添加到帧时保持先前的行为，则必须添加一些代码来定位它们。

要缩小范围，则当

dblclick

处理程序执行

$（this）.appendTo（“.inventory”）；

。要进一步缩小范围，发生的情况取决于项目在库存中的位置。低于已删除图像的所有内容都将在div中上移。