需要有关 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);
      }
      // ...
  });