从overflow：hidden div中拖出一个元素

Question

我正在尝试从容器中拖出一个元素，这是一个溢出：隐藏的div。在拖动时，元素位于容器后面（看起来好像在屏幕后面）。可拖动元素应该拖到容器外面，一旦在外面就会保持可见。

LINK TO THE FIDDLE

请注意

1）我不能在draggable中使用appendTo（因为它会在其他地方引起我的问​​题）

2）出于同样的原因，我不能再次使用helper:clone。

完整的代码如下。

HTML

<div id='outer_container'>
    <div id = 'inner_container'>
        <div class = 'draggable_element'></div>
        <div class = 'draggable_element'></div>
        <div class = 'draggable_element'></div>
    </div>
</div>

CSS

#outer_container
{
    background:#ededed;
    position:absolute;
    top:100px;
    left:40px;
    width:400px;
    height:100px;
    overflow:hidden;
}

#inner_container
{
    position:absolute;
    width:2000px;
    height:100px;
    top:0px;
    left:0px;
    background:#ededed;
}

.draggable_element
{
    position:relative;
    width:90px;
    height:80px;
    top:10px;
    left:20px;
    margin-right:50px;
    background:#ff9600;
    float:left;
}

SCRIPT

$('.draggable_element').draggable();

我希望有人可以指出我正确的方向。谢谢！