jQuery-UI bug causing images moving

Question

I have this Fiddle that I'm planning on incorporating into a website: http://jsfiddle.net/Thaikhan/fGJ59/3/show/

Functioning of the demo:

• Click an image to send it into the manipulation frame.
• Double-click the image to remove.
• Sort the list to the right to adjust the layering.

The problem is : images will often jump around the manipulation frame when they are double-clicked back down into the lower inventory frame.

The problem can be triggered if all of the images are put into the manipulation frame, superimposed on each other in the middle, and one is removed through double-clicking.

I believe it may be a jQuery-UI bug but I do not have the knowledge to debug the problem. I hope someone here can help me out.

Here is the jsFiddle: http://jsfiddle.net/Thaikhan/fGJ59/3/

And the javascript code:

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

Thank you kindly!

Answer 1

The issue here is that the jQuery UI resizable widget wraps your images in a relatively positioned div. Since they're position:relative removing an element will shift the vertical position of all of the elements below it in the document. You can fix this by adding:

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

to your CSS. See http://jsfiddle.net/fGJ59/5/.

With this fix your items will all occupy absolute position 0,0 when they're added to the frame, so they'll overlay one another. If you want them to keep the previous behavior when you add them to the frame you'll have to add some code to position them.