我正在尝试使用jQuery设置可拖动元素的z-index。您可以在此处查看我正在讨论和完成的内容：
http://jsfiddle.net/sushik/LQ4JT/1/
这很原始，并存在问题。您有什么想法，如何使最后点击的元素具有最高的z-index，并且而不是将所有其他元素重置为基本的z-index，使它们递增，因此倒数第二个点击的元素具有第二高的z-index等等。
我遇到的另一个问题是，它只在完全点击事件上起作用，但是可拖动功能是通过单击并按住下键来工作的。 我该如何在初始点击下应用类，而不是等待释放点击的事件？
您只需要使用draggable({stack: "div"})，现在当您拖动一个
我已经更新了你的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?。
$('#box1,#box2,#box3,#box4').draggable({
appendTo: "body",
zIndex: 10000
});
因此，对于堆叠，您需要使用stack: "div"，对于通过单击显示
distance: 0。
默认情况下，值为distance: 10，这意味着除非您将其拖动10像素，否则它不会显示在顶部。通过将值设置为distance: 0，可以使其在简单单击后显示在顶部。
尝试以下代码。
$('#box1,#box2,#box3,#box4').draggable({
stack: "div",
distance: 0
});
点击下面的 运行代码片段 按钮执行此嵌入代码片段。
$(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/
看起来还是很正常的，除非我漏掉了什么。
distance: 0。 - Keyslinger