Arrastando JQuery fora do pai

Estou usando o draggable () do JQuery; para tornar os elementos li arrastáveis. O único problema é que quando o elemento é arrastado para fora do pai, ele não aparece. Ou seja, ele não deixa os limites de sua div pai. Um exemplo está aqui:http://imgur.com/N2N1L.png - é como se o z-index para todo o resto tivesse maior prioridade (e o elemento deslize para baixo de tudo).

Aqui está o código:

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

E os elementos li são colocados em DIVs assim:

<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>

Estou certo de que o problema é que ele não deixará seu contêiner pai, mas não tenho certeza do que fazer para tirá-lo.

Qualquer direção ou ajuda seria muito apreciada!