需要有关 jquery 可拖动 z-index 问题的帮助

Question

下面的代码运行良好，因此当拖动一个块时，它位于其他块之上。但是，我不确定要添加什么，以便当用户放下盒子时，z-index 会更新并且盒子保持在顶部。现在，当盒子被放下时，它会在其他盒子下面，并保留其原始的 z-index。我确实看到了这个（// Setter $( ".selector" ).draggable( "option", "zIndex", 100 );) 在 API 文档中，只是不确定如何将它集成到我下面的工作代码中。感谢您的任何想法！

$(function(){
    var positions = JSON.parse(localStorage.positions || "{}");
    $(function () {
        var d = $("[id=draggable]").attr("id", function (i) {
            return "draggable_" + i
        })
        $.each(positions, function (id, pos) {
            $("#" + id).css(pos);
        })

        d.draggable({
            containment: "#containment-wrapper",
            zIndex: 100,
            scroll: false,
            stop: function (event, ui) {
                positions[this.id] = ui.position
                localStorage.positions = JSON.stringify(positions)
            }
        });
    });
});

Answer 1

我看到至少两个选项：

跟踪最大集合索引，每当移动元素时，将其索引设置为最大值 + 1，因此在删除时它将始终位于顶部。

var maxZIndex = 1; // or something else
d.draggable({
    // ...
    start: function (event, ui) {
        maxZIndex++;
        ui.helper.zIndex(maxZIndex);
        $(event.target).zIndex(maxZIndex);
    }
    //...
});

如果您不只是将元素拖到某处，而是将其放置在另一个元素上，则可以使用 droppable 获取放置事件并将 z-index 设置为z-index 可放置元素 + 1.

yourDroppables.droppable({
    // ...
    drop: function(event, ui) {
        var zIndex = $(event.target).zIndex()
        ui.draggable.zIndex(zIndex + 1);
    }
    // ...
});

需要有关 jquery 可拖动 z-index 问题的帮助

Need assistance wiht jquery draggable z-index issue

jquery

jquery-ui

z-index

draggable