我正在尝试使用 jQuery 在可拖动元素上设置 z-index。你可以在这里看到我在说什么以及我到目前为止所拥有的：
http://jsfiddle.net/sushik/LQ4JT/1/
它非常原始，并且存在问题。关于如何使最后单击的元素具有最高 z-index 的任何想法，而不是将所有其余元素重置为基数 z-index，让它们一步，所以第二次到最后单击的元素具有第二高的 z-index，等等。
我遇到的另一个问题是它仅适用于完全点击事件，但可拖动功能通过单击并按住来工作。我怎么能在初始点击时应用类而不等待释放点击的事件？
【问题讨论】：
标签： jquery css jquery-ui draggable z-index
您需要做的就是使用draggable({stack: "div"})
现在，当您拖动 div 时，它会自动到达顶部。
【讨论】：
distance: 0
我已经更新了你的 CSS 和 Javascript。不要在 css 中使用“！important”，除非你非常绝望。
$(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?。
【讨论】：
我发现解决此问题的最简单方法是使用 appendTo 和 zIndex 选项。
$('#box1,#box2,#box3,#box4').draggable({
appendTo: "body",
zIndex: 10000
});
【讨论】：
以下代码将满足您的要求。你需要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
});
点击下面的运行代码sn-p按钮来执行这个嵌入的代码sn-p。
$(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>【讨论】：
堆栈：“div”也适用于元素组
<style media="screen">
.box {width: 150px; height: 150px; position: absolute; z-index: 0;}
.box:nth-child(1) {background-color: red; top: 0px; left: 0px;}
.box:nth-child(2) {background-color: green; top: 20px; left: 50px;}
.box:nth-child(3) {background-color: yellow; top: 50px; left: 100px;}
.box:nth-child(4) {background-color: blue; top: 80px; left: 150px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.box').draggable({stack: "div"});
});
</script>
<div id="dragZone">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</div>
【讨论】：
这是 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/
似乎仍然运行良好，除非我遗漏了什么。
【讨论】：