Question

我已经让下面的代码运行良好，因此当拖动一个块时，它位于其他块的顶部。但是，我不确定要添加什么，以便当用户放下框时，更新z-index并且框保持在顶部。现在当盒子掉落时，它会移到其他盒子下面，保留原来的z-index。我确实看到了这个（// Setter API文档中的$（“。selector”）。draggable（“option”，“zIndex”，100）;），不知道如何将它集成到我下面的工作代码中。谢谢你的任何想法！

$(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获取drop事件并将z-index设置为droppable的z-index元素+ 1。

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

需要jquery draggable z-index问题的帮助

1 个答案: