javascript - jQuery で並べ替え可能な (ドラッグ アンド ドロップ) ダッシュボード コンテナー

Question

シナリオ：

さまざまなサイズのウィジェットを持つ種類のダッシュボードを作成しようとしています。ユーザーが好みに合わせてウィジェットを配置できるようにしたいと考えています。

ポートレットの例を使用して、 jQuery UI のソート可能な対話を実装しようとしていますが、問題が発生しています。

機能しているもの:

同じ行内の列間でコンテナーをドラッグ アンド ドロップ/再配置できます。

機能していないもの:

行間でコンテナをドラッグできません。

私の質問：

行と列 の間でドラッグ/ドロップを有効にするにはどうすればよいですか?

jsFiddle デモ:

http://jsfiddle.net/SWUTR/

---

関連する HTML:

<div class="column">
    <div class="container span2"></div>
    <div class="container span2"></div>
</div>
<div class="column">
    <div class="container span1"></div>
    <div class="container span2"></div>
    <div class="container span1"></div>
</div>
<div class="column">
    <div class="container span4"></div>
</div>

関連する CSS:

.column .container {
    float:left;
    margin:5px;
    min-width:100px;
    height:250px;
    background:#39F;    
}
    .column .container.span1 {
        width:calc(25% - 10px); 
        background:#6CC;
    }
    .column .container.span2 {
        width:calc(50% - 10px); 
        background:#6F6;
    }
    .column .container.span3 {
        width:calc(75% - 10px); 
        background:#99C;
    }
    .column .container.span4 {
        width:calc(100% - 10px);
        background:#33C;    
    }

関連する jQuery:

$(".column").sortable({
    connectWith: ".column"
});
$(".column").disableSelection();