我想在点击时将一个jQuery可拖动的div带到前面。我读了这篇文章,并在这里构建了 JsFiddle,但它没有用。我错过了什么吗?谢谢!
这是我创建的 jsfiddle,元素是可拖动的,并且在拖动时会被带到前面,但我无法在单击时将它们放在前面。z指数之间有冲突吗?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');
});
});
谢谢!
我无法弄清楚它不起作用的原因,但我通过使用以下更改您的代码来使其工作-
$('.front-on-click').click(function() {
$('.front').css('z-index','0').removeClass('front');
$(this).addClass('front').css('z-index','100');
});
使用这个
$('.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');
});