複数のリストの境界を越え、ドラッグ＆ドロップで並べ替え

jQuery UI の Sortable プラグインの connectWith オプションを使うと、複数のリストの境界を越え、ドラッグ＆ドロップで並べ替えることができる。
いづれかのリスト内の項目を、他のリストへすべて移動しても、CSSで一行ほどのスペースを残し、そこへドロップすることができるようにした。

実装例（サンプル）

• 項目 1-1
• 項目 1-2
• 項目 1-3
• 項目 1-4
• 項目 1-5
• 項目 1-6
• 項目 1-7

• 項目 2-1
• 項目 2-2
• 項目 2-3
• 項目 2-4
• 項目 2-5
• 項目 2-6
• 項目 2-7

• 項目 3-1
• 項目 3-2
• 項目 3-3
• 項目 3-4
• 項目 3-5
• 項目 3-6
• 項目 3-7

実装例の動作について

左のリストの「項目 1-1」をドラッグして、中央のリストの「項目 2-2」の上に持ってくると、「項目 2-2」が下へ移動し、「項目 2-1」と「項目 2-2」の間にスペースができる。そのスペースへドロップすると、中央のリストは「項目 2-1」「項目 1-1」「項目 2-2」「項目 2-3」…の順番になる。左のリストは、「項目 1-1」が中央のリストへ移動したので、「項目 1-2」「項目 1-3」「項目 1-4」…の順番になる。
同様に、全ての項目が、左、中央、右のリスト内の任意の位置へ移動できる。
いづれかのリスト内の項目を、他のリストへ、すべて移動した場合も、一行ほどのスペースが残るので、そこへドロップすることができる。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML