タスク管理強化シリーズ第二弾!タスクの順序をドラッグ&ドロップで変更できます!

  • 投稿日:

Check4Lifeタスク管理強化シリーズ第二弾!

タスクの順序をマウスのドラッグ&ドロップで変更できるようにしました。

タスクリストでは、優先順位に従って並べて、 順番に上から処理するという人が多いのではないでしょうか。

画面を見ながら、大切なタスクを上に持っていって、
その日のやるべきことと順番を考える。

そんなスタイルに対応したいと思って、前からやりたいやりたいと思っていたのですが、
順番を変更するには、JavaScriptと、Ajaxの技術が必要で、
ずっと手を付けられませんでした。

そこで、この夏に取り組みました。

こんな感じでタスク名称をマウスでつかんで、タスクの順番を自由に変更できます。
タスクをやる順に並べ替えることが簡単にできるようにしました。

201309210836.jpg

スマホでは、タスク名称を押してそのままドラッグすると、
指にタスクがついてきます。


201309210838.jpg

画面上で並びを変更するのは、
jQueryUIというライブラリを使わせてもらえば、比較的簡単。
ライブラリ作者に感謝感謝です。

苦労したのは、ユーザーが並びを変更した時に、
裏でAjaxを使ってサーバーと通信し、順番を保存することでした。

そんな時に役に立ったのが、 オライリーシリーズの「入門モダンJavaScript」です。
単なる技術ノウハウが書かれている本ではなく、 設計の哲学にまで言及した、
技術書には 珍しく読んでいて感動する本でした。

著者のLarry Ullmanさんに感謝です。


○関連記事