在可拖动元素上设置z-index

Question

我试图使用jQuery在可拖动元素上设置z-index.你可以看到我在说什么,到目前为止我在这里:

http://jsfiddle.net/sushik/LQ4JT/1/

这是非常原始的,它有问题.关于我如何使最后点击的元素具有最高的z-index而不是将所有其余部分重置为基础的任何想法z-index,让它们步进,所以第二个到最后点击具有第二个最高z-index等等.

我遇到的另一个问题是它只适用于完整点击事件,但可拖动功能通过点击和按住来工作.如何在初始点击时应用该类,而不是等待释放点击的事件？

Answer 1

您需要做的就是使用draggable({stack: "div"}) Now拖动div时它将自动显示在顶部.

查看http://jsfiddle.net/LQ4JT/8/上的工作示例

Answer 2

我已经更新了你的CSS和Javascript.除非你非常绝望,否则不要在CSS中使用"!important".

http://jsfiddle.net/LQ4JT/7/

    $(document).ready(function() {
        var a = 3;
        $('#box1,#box2,#box3,#box4').draggable({
            start: function(event, ui) { $(this).css("z-index", a++); }
        });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});

虽然这个答案有效但它在javascript中有最大数量2 ^ 31-1的限制.参考什么是数字可以达到的JavaScript的最高整数值而不会丢失精度？了解更多信息.

Answer 3

以下代码将满足您的要求.你需要stack你divs而不是设置z-indexes,其次你只需点击它而不是拖动它就需要在顶部显示div.

因此,对于堆叠,您需要stack: "div"并通过简单地单击在顶部显示div元素,您需要使用distance: 0.

默认情况下,该值distance: 10意味着在您不拖动它之前10 pixels,它不会显示在顶部.通过设置值,distance: 0使其在单击后显示在顶部.

请尝试以下代码.

$('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
});

在这里工作JSFiddle.

编辑:

单击Run code snippet下面的按钮以执行此嵌入式代码段.

$(document).ready(function() {

  $('#box1,#box2,#box3,#box4').draggable({
    stack: "div",
    distance: 0
  });

  $('#dragZone div').click(function() {
    $(this).addClass('top').removeClass('bottom');
    $(this).siblings().removeClass('top').addClass('bottom');

  });
});

#box1 {
  width: 150px;
  height: 150px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0
}

#box2 {
  width: 150px;
  height: 150px;
  background-color: green;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 0
}

#box3 {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 0
}

#box4 {
  width: 150px;
  height: 150px;
  background-color: blue;
  position: absolute;
  top: 70px;
  left: 200px;
  z-index: 0
}

.top {
  z-index: 100!important;
  position: relative
}

.bottom {
  z-index: 10!important;
  position: relative
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="dragZone">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

Answer 4

我发现解决此问题的最简单方法是使用appendTo和zIndex选项。

$('#box1,#box2,#box3,#box4').draggable({
  appendTo: "body",
  zIndex: 10000
});