JQuery Dragging Outside Parent

Question

I'm using JQuery's draggable(); to make li elements draggable. The only problem is when the element is dragged outside its parent, it doesn't show up. That is, it doesn't leave the confines of its parent div. An example is here: http://imgur.com/N2N1L.png - it's as if the z-index for everything else has greater priority (and the element slides under everything).

Here's the code:

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

And the li elements are placed in DIVs like this:

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

I'm positive the problem is it won't leave its parent container, but I'm not sure what to do to get it out.

Any direction or help would be appreciated GREATLY!

Answer 1

I landed on this page with the exact same problem, and Brendan's answer got me close. Setting the appendTo option didn't help, but I was able to resolve my issue by adding overflow: visible to the parent of my draggable element. Turns out I was sloppily inheriting hidden from somewhere up the chain.

Side note, it looks like this works because jQuery UI moves the draggable element by dynamically setting positioning relative to the parent - this was new intel for me!