Jquery draggable list items are hidden

Question

Hi i've a list item with draggable action. When i dragged one li, the li is hidden by other list items

DEMO : JsFiddle

$(function()
  {

      $("#drop").droppable({
          drop:function(e)
          {
              $("#drop").html("is drop");
          }
      });
      $("#down li").draggable({revert:true});
  });

<ul id="down">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<div id="drop">
</div>

I want that the li item dragged would be visible over the others items

Answer 1

Add the stack option to your draggable:

$("#down li").draggable({
    revert: true,
    stack: "li"
});

jsFiddle example

From the docs:

stack: Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things like window managers.

Answer 2

Thank a lot, Yes i haven't seen in documentation (but it's in english and it's not very comprehensive). My code is little bit complicated because, i manage the multiple drag. And the others li dragged don't appear in front of the other li. But i've add to start event in draggable:

 $(this).css("z-index","9999") 

and

$(this).css("z-index","1")

to stop event in draggable with stack:".ui-selected" . And all my list item selected to drag appeared in front.