Question

我正在尝试使用jQuery在可拖动元素上设置z-index。你可以看到我在说什么，到目前为止我有什么：

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

这是非常原始的，并且存在问题。关于如何使最后点击的元素具有最高z-index而不是将所有其余元素重置为基础z-index的任何想法，让它们步进，所以第二个到最后点击的元素具有第二高{{1} 1}}等等。

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

Answer 1

您需要做的就是使用draggable({stack: "div"}) 现在，当你拖动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的限制。有关详细信息，请参阅What is JavaScript's highest integer value that a Number can go to without losing precision?。

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

<强> Working JSFiddle Here.

编辑：

点击下方的运行代码段按钮执行此嵌入式代码段。

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

Answer 5

堆栈：“div”也适用于元素组

df1 <- structure(list(P.I.D.. = c("003-913-627", "003-913-627", "003-913-627", 
"003-913-627", "003-913-627", "003-913-627", "003-913-627", "003-913-627", 
"003-913-627", "003-913-627", "003-913-627"), Status = c("X", 
"T", "S", "S", "S", "T", "T", "S", "S", "X", "X"), List.year = c(2000L, 
2010L, 2018L, 2018L, 2002L, 2007L, 2007L, 2008L, 2008L, 2009L, 
2009L), CURRENT_LAND_VALUE = c(NA, 1578000L, NA, 2814000L, NA, 
390000L, 295000L, 464000L, 339000L, 339000L, 464000L), 
CURRENT_IMPROVEMENT_VALUE = c(NA, 
1201000L, NA, 901000L, NA, 282000L, 180000L, 391000L, 246000L, 
246000L, 391000L)), class = "data.frame", row.names = c("1", 
"2", "3", "4", "5", "6", "7", "8", "9", "10", "11"))

Answer 6

以下是Mahesh答案的大大简化版本：

$(document).ready(function() {
  var a = 1;
  $('#box1,#box2,#box3,#box4,#box5,#box6,#box7').draggable({
    start: function(event, ui) { $(this).css("z-index", a++); }
  });
});

http://jsfiddle.net/LQ4JT/713/

似乎仍然有效，除非我遗漏了什么。

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

6 个答案:

检查http://jsfiddle.net/LQ4JT/8/

编辑：