ドラッグ&ドロップで列を入れ替えられるようにする
WEBアプリで、
「テーブルの列をドラッグ&ドロップで並べ替えられるようにしたい!あと、並べ替えた結果はユーザごとに保存しておけるようにしてほしい!」とか言われて「は?」と思ったんですが
調べてみるとJSライブラリがあったのでそれでさくっと実装。
ここからダウンロードできますし、動くサンプルもあります。
danvk.org » dragtable: Visually reorder all your table columns
実装方法はというと、
ダウンロードしたら適当なところに設置して、
<script src=" ... /dragtable.js"></script>
と読み込んで、テーブルタグにclassを設定するだけ。
<table class="draggable">
以上。
…あっ、結果は保存できるようにするんだった、と思ったのですが
なんとcookieへの保存機能もデフォルトで付いてる。すごい。
tableタグのidを利用して保存し分けているようなので、
同じサイト内で複数テーブルにこれを利用するときは注意、くらいでしょうか。
(別のページであってもidを分けるよう注意するだけ)
あと、サイドバーやヘッダなどを付けている場合、
付け方によってはドラッグ中の表示がその幅だけズレます。
もしそうなったときはコードをちょっと修正します。
(わたしがダウンロードしたときは)239行目くらい:
// 元の記述 //new_elt.style.left = obj_pos.x + "px"; // 修正した記述(左に250pxサイドバーがあって右にずれていたので、x座標から250引いている) new_elt.style.left = (obj_pos.x - 250) + "px";
参考
ドラッグ&ドロップでテーブルの列を入れ替える - JavaScript dragtable | ホームページ制作のサカエン(墨田区)