javascript - オーバーフローから要素をドラッグ:hidden div

Question

オーバーフロー: 非表示の div であるコンテナーから要素をドラッグしようとしています。ドラッグしている間、要素はコンテナの後ろに移動します (スクリーンの後ろにあるかのように見えます)。

フィドルへのリンク

その点に注意してください

1）appendToドラッグ可能の内部を使用できません（他の場所で問題が発生するため）

helper:clone2)同じ理由で二度と使えない。

完全なコードは次のとおりです。

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

脚本

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

誰かが私を正しい方向に向けてくれることを願っています.Thank!