格子状に並べたリストをドラッグ＆ドロップで並べ替え

jQuery UI の Sortable プラグインを使い、格子（グリッド）状に並べたリストを、ドラッグ＆ドロップで並べ替えられるようにする方法。

実装例（サンプル）

• 項目 1
• 項目 2
• 項目 3
• 項目 4
• 項目 5
• 項目 6
• 項目 7
• 項目 8
• 項目 9

実装例の動作について

「項目 1」をドラッグして、中央へ動かし、「項目 5」の上に持ってくると、「項目 5」が左へ移動し、「項目 5」と「項目 6」の間にスペースができる。そのスペースへドロップすると、「項目 1」が中央へ移動し、中央の行は「項目 5」「項目 1」「項目 6」…の順番になる。上の行は「項目 2」「項目 3」「項目 4」…の順番になる。下の行は「項目 7」「項目 8」「項目 9」…の順番のまま。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML