jQuery UI の Sortable による並べ替えを楽にするオプション

jQuery UI の Sortable プラグインの cursor オプション、 opacity オプション、 placeholder オプションについて。これらのオプションを使うと、さらに、並べ替え作業が楽になる。
cursor オプションは、移動中のカーソルを変更することができるオプション。
opacity オプションは、移動中の項目を半透明にできるオプション。
placeholder オプションは、移動先のスペースをハイライト表示するオプション。

実装例（サンプル）

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

実装例の動作について

「項目 1」を、ドラッグして、移動を開始すると、カーソルが、移動カーソルに変わる。さらに、移動中の「項目 1」が半透明になる。「項目 1」を下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができ、スペースをハイライト表示し目立たせる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。
同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML