リスト、グリッドに対応したD&Dソートライブラリ「HTML5 Sortable」
HTML5 SortableはHTML5のドラッグ&ドロップAPIを使った手動のソートライブラリです。
情報のソートには幾つかのやり方がありますが、今回は手作業によるソートライブラリであるHTML5 Sortableを紹介します。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-21 10.00.45.1358765132.png)
リストです。
こんな感じでドラッグして入れ替えられます。
グリッドにも対応しています。
ハンドル部分を付けることもできます。
二つのリスト間で入れ替えもできます。
[](http://images.moongift.jp/2013/01/Screenshot 2013-01-21 10.03.33.1358765148.png)
こんな感じにね。
HTML5 SortableはHTML5ネイティブのドラッグ&ドロップAPIを使って構築されています。ですが対応ブラウザはIE5.5、Firefox3.5、Chrome3、Safari3そしてOpera12以降となっており幅広いブラウザに対応しています。APIも多彩で操作した結果を受け取るのも簡単です。
HTML5 SortableはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
システムで情報を出力する際の並び順は常に問題になります。作成順に出力すれば、常にリストの頭が固定になります。名前順にすると分かりやすい反面、日本語の取り扱いにおいて問題が出ることもあります。そのため、ソートインデックスを付与して運営者サイドで指定できるようにしている例が多いようです。
この場合でも管理画面でのソート指定が全ユーザに共通となってしまい、あるユーザにとっては常にストレスを感じるUIになってしまう可能性があります。ユーザごとのソート指定は非常に面倒かもしれませんが、予めそうやって実装しておけば後の変更が容易になるでしょう。