javascript - How to bring a dragable div to front when clicked? -

i bring jquery dragable div front when clicked. read this post, , build jsfiddle here, did not work. missing something? thanks!

here jsfiddle created, elements dragable , brought front while dragging, not bring them front while being clicked. there conflict between z-index? jsfiddle

here code: 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> 

here javascript:

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

thanks!

i couldn't figure out reason why won't work, got working changing code following-

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