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

Setting z-index on draggable elements

提问by Zac

I am trying to set the z-index on draggable elements using jQuery. You can see what I am talking about and what I have so far here:

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

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

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

It is very primitive and there are problems with it. Any ideas on how I would make the last clicked element have the highest z-index and rather than resetting all of the rest to a base z-index, have them step, so the 2nd to last clicked has the second highest z-index, etc..

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

Another problem I am having with it is that it only works on a full click event but the draggable functionality works by clicking and holding down. How could I have the class applied on that initial click down and not wait for the event of releasing the click?

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

采纳答案by Mahesh

I have updated your CSS and Javascript. Don't use "!important" in css unless you are that much desperate.

我已经更新了你的 CSS 和 Javascript。不要在 css 中使用“!important”，除非你非常绝望。

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

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

});?

});?

Though this answer works it has the limitation of max number of 2^31?1 in javascript. refer What is JavaScript's highest integer value that a Number can go to without losing precision?for more info.

尽管此答案有效，但它在 javascript 中具有最大数量 2^31?1 的限制。参考JavaScript 在不损失精度的情况下，数字可以达到的最高整数值是多少？了解更多信息。

回答by Hussein

All you need to do is use draggable({stack: "div"})Now when you drag a div it will automatically come to the top.

您需要做的就是使用draggable({stack: "div"})Now 当您拖动一个 div 时，它会自动到达顶部。

Check working example at http://jsfiddle.net/LQ4JT/8/

在http://jsfiddle.net/LQ4JT/8/检查工作示例

回答by Caedmon

The easiest way I found to solve this problem was to use the appendTo and zIndex options.

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

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

回答by Suhaib Janjua

Following code will fulfill your requirements. You need to stackyour divsinstead of setting z-indexesand secondly you need to show the div at top after simply clicking it not dragging it.

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

So for stacking you need stack: "div"and for showing the div element on the top by simply click, you need to use distance: 0.

因此，对于您需要的堆叠stack: "div"以及只需单击即可在顶部显示 div 元素，您需要使用distance: 0.

By default the value is distance: 10which means until you don't drag it 10 pixels, it won't show up on the top. By setting the value to distance: 0makes it show on the top after a simple click.

默认情况下，该值distance: 10意味着除非您不拖动它10 pixels，否则它不会显示在顶部。通过设置值distance: 0使其在单击后显示在顶部。

Try the following code.

试试下面的代码。

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

Working JSFiddle Here.

在这里工作 JSFiddle。

---

---

Edit:

编辑：

Click the Run code snippetbutton below to execute this embedded code snippet.

单击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>

回答by Jehan

Here is a greatly simplified version of Mahesh's answer:

这是 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/

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

Still seems to work well, unless I am missing something.

似乎仍然运行良好，除非我遗漏了什么。