2015年2月10日火曜日

テーブル内の項目をドラッグ アンド ドロップしたり行を並び替えたりできる JavaScript ライブラリ REDIPS.drag がすごい

仕事でウェッブアプリケーションのサンプル作って欲しいと依頼されました。
依頼されたサンプルは、カレンダーのようにテーブル内の文字列をドラッグ・アンド・ドロップで配置を変更できるもの。
JavaScript はあまり詳しくないのに「できるんじゃないの?」と安請け合いしてしまいました。

jQuery UI 使えば作れるのかなあ?と DraggableDroppable をいじるもどうも違う。
頭が沸いた翌日、気を取り直して別角度から調査。おお!これだ!とお目当てのライブラリを発見。

REDIPS.drag

上記ページにデモもあるのでご覧ください。
ライブラリのダウンロードは、上記ページのメニュー GitHub をクリックし、 Drag and Drop table content with JavaScript の Download をクリックしてください。

ダウンロードしたファイルの中にもサンプルが28個も格納されています。

良い点をあげます。

  • jQuery に依存しておらず、単独のライブラリとして動作可能。
  • jQuery とも共存可能らしい。
  • IE8 でも問題なく動作する。
  • div 要素をドラッグ・アンド・ドロップできるので、 div 内に input hidden などを仕込んでおけば、フォーム送信も可能。

おかげさまでサンプルページも無事作成できました。
ネットの片隅から感謝。

0 件のコメント :

コメントを投稿