アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

ドラッグ&ドロップで列を入れ替えられるようにする

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 | ホームページ制作のサカエン(墨田区)