ドラッグ＆ドロップで並べ替える対象となる要素を指定

jQuery UI の Sortable プラグインの items オプションを使うと、ドラッグ＆ドロップで並べ替える対象となる要素を指定できる。
デフォルトでは、リストタグの li 要素が、並べ替える対象だが、items オプションを使うことで、任意の要素に変更できる。要素名でも指定できるが、クラス名で指定すると、タグを入れ子にしても大丈夫なので、私ならクラス名で指定する。

実装例（サンプル）

• 項目 1
  • 項目 1-1
  • 項目 1-2
  • 項目 1-3
• 項目 2
  • 項目 2-1
  • 項目 2-2
  • 項目 2-3
• 項目 3
  • 項目 3-1
  • 項目 3-2
  • 項目 3-3

実装例の動作について

「項目 1」にカーソルを合わせると、カーソルの形状が移動用カーソル形状になる。「項目 1」をドラッグし、「項目 2」のボックスの上に持ってくると、「項目 2」のボックスが上へ移動し、「項目 2」のボックスと「項目 3」のボックスの間にスペースができる。そのスペースへドロップすると、「項目 1」のボックスと「項目 2」のボックスが入れ替わり、「項目 2」「項目 1」「項目 3」のボックスの順番になる。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML