ドラッグ＆ドロップで並べ替えた順番を保存・再現

jQuery UI の Sortable プラグインを使ったドラッグ＆ドロップによる並べ替えにおいて、並べ替え後の順番をクッキー（cookie）に格納し、次回ページを開いたときに、前回並べ替えた順番で表示させる方法。
cookie への格納には、jQuery の Cookie プラグインを使用する。

実装例（サンプル）

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

実装例の動作について

1. 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。
2. ページをリロード（再読み込み）しても順番を保持したまま、「項目 2」「項目 1」「項目 3」…の順番となる。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML