title: jquery ui draggable element appears behind other elements?
body: <p>I am using jquery ui draggable, and eventually droppable to make it possible to reorder pictures into different boxes.</p>
  
  <p>When I drag a picture out of the box it appears under all the other elements once it leaves its direct container.  </p>
  
  <p>While googling I was able to found to add: </p>
  
  <pre><code>   helper: 'clone',
     appendTo: "body"
  </code></pre>
  
  <p>This makes it so what is being dragged appears on top of all elements, but it leaves the original copy still in the box and I do not want that.</p>
  
  <p>Is there a way I can make the element stay on top of everything when being dragged? I have tried a high z-index to no avail.</p>
  
  <p>Here is a jsfiddle that shows the first draggle element behind behind the second. it is not an issue the other way around.
  i am not able to change the position relative on the containing divs without breaking a lot of other things.</p>
  
  <p><a href="http://jsfiddle.net/cBWhX/6/">http://jsfiddle.net/cBWhX/6/</a></p>