Sortable / 並べ替え

ドラッグ＆ドロップで、要素を並べ替えられるようにしたい場合には、jQuery UI の Sortable が便利だ。

• jQuery UI の Sortable を使いドラッグ＆ドロップで並べ替え

  jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えを行えるようにする方法。「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができ、そこへドロップすると、順番が入れ替わる。

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

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

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

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

• ドラッグ＆ドロップで並べ替えた順番を送信

  jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。

• 複数のリストの境界を越え、ドラッグ＆ドロップで並べ替え

  jQuery UI の Sortable プラグインの connectWith オプションを使うと、複数のリストの境界を越え、ドラッグ＆ドロップで並べ替えることができる。いづれかのリスト内の項目を、他のリストへすべて移動しても、CSSで一行ほどのスペースを残せば、そこへドロップすることができる。

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

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

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

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

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

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

• ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加

  jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ＆ドロップで、新たな項目を、並び替えられるリストへ、追加できる。

• ドラッグ＆ドロップによりタブの順番を並べ替えられるタブメニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、ドラッグ＆ドロップにより、タブの順番を、並べ替えられるようにする方法。ドラッグ＆ドロップで並べ替えられるようにするには、Sortable プラグインを併用する。

• 順番を入れ替えられるアコーディオンメニュー

  jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。ドラッグ＆ドロップで、メニューの順番を入れ替えられるタイプ。順番の入れ替えには、jQuery UI の Sortable プラグインを使っている。