Posted on

sortableは超便利!

javascriptの拡張ライブラリ、jQueryの便利さはWebアプリケーション開発に携わっている皆さんにとっては自明のことだと思います。
そしてそのjQueryをベースにしてインタラクティブなUIをブラウザ上で実現してしまうのがjQueryUIライブラリです。
コレもご存知のことと思いますが……(^^;

このjQueryUIではUI操作の基本となるDraggable(ドラッグ),Droppable(ドラッグしたものを落とす),Resizable(大きさを変える),Selectable(選択する),Sortable(順番を並び替える)というインタラクティブ動作を支えるライブラリがあるのですが、一番UI的に受けがいいのはSortableではないかと思います。

たとえばこんなのです↓


  • りんご
  • みかん
  • バナナ
  • パイナップル
  • 柚子
  • ライチ
  • 無花果

上のリストのどれでもいいのでドラッグ&ドロップで順番を入れ替えてみてください。
さわってるだけでも楽しい感じで、Web系だと中々難しかったUIが発想しだいでどんどん作れそうな感じです。

例えば拡張してこんなことも↓

  • カバ
  • サイ
  • ライオン
  • にんげん
  • コウノトリ
  • ペンギン
  • アヒル
  • とんび

2つのエリア内で要素を自由にドラッグ&ドロップできます。
もちろんそれなりに手がかかるんですけれど、クライアントとなるパソコンの処理能力もアップし、jQueryUIでWindowsのアプリケーションもしくはそれ以上のUIを発想しだいで作れるようになったのは、いい時代だなあ~と思います☆