Draggable out of a css div that has position absolute and overflow:hidden

Draggable out of a css div that has position absolute and overflow:hidden


hi
hope this is possible... i have a list on the right hand side.. need
to drag it out of the right hand side into the left hand side... the
right hand column is positioned inside a div with overflow hidden then
inside another div (both position absolute) with overflow: auto (the
second div has auto)
when i drag a list item... it renders as "hidden" as soon as it goes
outside the divs. anyways past it?
heres some demo code
<script>
$(document).ready(function () {
    $(".dragable").draggable({
            opacity: 0.8,
            helper: 'clone',
            containment: false,
            zIndex: 2710,
            stop: function(event, ui) {
                if (ui.helper !== null) {
                    console.log(ui.position);
                }
            }
        }).disableSelection()
});
</script>
<style type="text/css">
<!--
#right {
    border: 1px solid #000;
    overflow: hidden;
    position: absolute;
    width: 200px;
    top: 10px;
    right: 10px;
    bottom: 10px;
}
#dragzone {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:auto;
}
.dragitem {
    padding: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    border: 1px solid #CCC;
    background-color: #CF6;
    display: block;
    width:190px;
}
-->
</style>
<div id="right">
<div id="dragzone">
    <div class="dragitem">test 1</div>
    <div class="dragitem">test 2</div>
    <div class="dragitem">test 3</div>
    <div class="dragitem">test 4</div>
</div>
</div>