jquery-ui, draggable item : does'nt work when position is absolute

Question

I'm trying to make draggable items contained in a position:absolute DIV. It works well when dragged over a div declared earlier in the code, but this item will never appear over a [position:absolute] div declared later in the code, even when setting lower Z-index to this DIV...

Here's an example

$(function(){
			$(".myClass").draggable({stack:".bg"});
		}(jQuery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index:10;">
	<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index:10;">
	<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-index:10;"></div>

Any idea of how i could solve that issue ?

Thx.

Answer 1

The problem is your z-index on the parents elements. One easy way to resolve your problem is to simply remove them. Or you can manipulate them on start and stop so the draggable parent is always at the top. See here with manipulating on start and stop, but removing it from your HTML should also work.

$(function() {
  $(".myClass").draggable({
    stack: ".myClass",
    start: function(e, ui) {
      ui.helper.parent().css('z-index', 30);
    },
    stop: function(e, ui){
      ui.helper.parent().css('z-index', 10);
      }
  });
}(jQuery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index: 10;">
  <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index: 10;">
  <div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-indx: 10;"></div>