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

This looks like a css issue. Try turning off the revert so it stays put when you drag it to where it is half visible. Then play with the z-index etc in Firebug and see if you can get it showing. It might be a css issue with one of the parent ul or div's with 'overflow: hidden'.