JQuery Sortableを使って順番入れ替え機能の作成

WEBで表示順の入れ替え機能って作るのも、使うのも面倒なんだよね。上下に移動するボタン作ったり、表示順を数値で入力したり。

で、最近そんな機能を作成する必要が出てきまして。いろいろ考えて、そういえばWordPressのウィジェット（右側の最近の投稿やコメントがドラッグアンドドロップで入れ替え可能）って便利だよね、そんな風にできないかな、と思って調べてみたら出来たのでメモ。

とりあえず、何かしらライブラリを使えばできるだろう、と思って調べてみた。やっぱりこういうときはJQuery と YUI に当たることが多いね。

YUI Library Examples: Drag & Drop: Reordering a List

Sortable Demos (jQuery UI – Functional demos)

ちなみに、WordPressもJQueryっぽい。Sortableを使ってるかどうかはよく判らなかったけど。

で、今回は参考になる情報が多そうなJQueryを選択。参考にさせて頂いたのは以下のサイト。

jQuery Sortablesでドラッグ&ソータブル (All About)

ColdFusion（順序　並び替え） (有限会社デジタルムーン)

上の二つのサイトを見ればだいたい判ります。

参考にして作ったファイルがこれ。ちょっと詰まった部分はどうやってデータをPOST,GETするんだろう、という所。
sortable.php

見て貰えば判るように、並び替えた時にテキストボックスに順番を保存し、submitで送信してます。テキストボックスに保存できちゃえば、あとはsplitか何かで分割するだけだもんね。

よく判らなければ、ソース置いておきますので見てくださいな。

sortable.txt