如何在点击时将可拖动的div放到前面？

Question

我想单击时将jQuery可拖动div带到前面。我读this post，并在这里构建JsFiddle，但它不起作用。我错过了什么吗？谢谢！

这里是我创建的jsfiddle，这些元素是可拖动的，并且会在拖动时被拖动到前面，但我不能在被点击时将它们放到前面。 z-index之间有冲突吗？ JSfiddle

下面是代码： HTML

<div> 
<div id="box1" class="front-on-click"></div> 
<div id="box2" class="front-on-click"></div> 
<div id="box3" class="front-on-click"></div> 
<div id="box4" class="front-on-click"></div> 

这里是JavaScript：

$(document).ready(function() { 
$('#box1,#box2,#box3,#box4').draggable({stack: "div"}); 
$('.front-on-click').click(function(){ 
    $('.front').removeClass('front'); 
    $(this).addClass('front'); 
}); 

}); 

谢谢！

Answer 1

我无法弄清楚，为什么它不会工作的原因，但我得到了它与以下各项

$('.front-on-click').click(function() { 
    $('.front').css('z-index','0').removeClass('front'); 
    $(this).addClass('front').css('z-index','100'); 
}); 

Answer 2

使用本

$('.front-on-click').click(function(){ 
    $(".front-on-click").each(function(){ 
     $(this).css("z-index", "1"); 
     $(this).removeClass('front'); 
    }); 
    $(this).css("z-index", "10"); 
    $(this).addClass('front'); 
});