单击时如何将可拖动的 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');
});

单击时如何将可拖动的 div 置于最前面？

How to bring a dragable div to front when clicked?

html

javascript

css

jquery

z-index