ドラッグ＆ドロップで並べ替えるときのドラッグできる部分を指定

jQuery UI の Sortable プラグインの handle オプションを使うと、ドラッグ＆ドロップで並べ替えるときの、ドラッグできる部分を指定できる。
項目のボックスを並べ替えたいが、ドラッグできるのはボックス内の一部だけにしたい…そんなときに、役立つオプションだ。

実装例（サンプル）

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

実装例の動作について

「項目 1」のボックス内の右端にある にカーソルを合わせると、カーソルの形状が移動用カーソル形状になる。「項目 1」の を、ドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。
同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。ただし、ドラッグできるのは、各項目のボックス内の右端にある だけ。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML