ドラッグ&ドロップでテーブルの列を入れ替える - JavaScript dragtable ホームページ制作 | 墨田区

ドラッグ&ドロップでテーブルの列を入れ替える – JavaScript dragtable

LINEで送る
Pocket

ドラッグ&ドロップでテーブルの列を入れ替えるライブラリのご紹介です。

こんなテーブルが

dragtable サンプル1
こんな感じでドラッグできます。

dragtable サンプル2



【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・



利用方法も簡単です。

<head> に、<script src="dragtable.js"></script> と、JavaScript を読み込むように設定します。

該当のテーブルに、<table class="draggable"> と class に設定するだけ。

<table class="draggable sortable"> と class 設定すると、テーブルの <th> をクリックすると、ソートしてくれます。
dragtable サンプル3
んー、すごい^^

MIT license なので、商用利用も可能です。

MIT Licenseとは?
非常に制限の緩いライセンスです。ダウンロードした js ファイルにコメントで MIT Lisene が記述されています。そのコメントを残しておきさえすれば、商用サイトでも自由に使用して問題ありません。

以下のサイトからダウンロードできます。
dragtable: danvk.org » dragtable: Visually reorder all your table columns

sorttable: sorttable: Make all your tables sortable

左列を固定して商品比較などに利用する


今回はこれを応用して、一番左列を固定し、縦に商品情報を並べ、ドラッグ&ドロップにて列を入れ替えてみましょう。
価格.com の商品比較に類似している感じです。

サンプルは以下のとおりです。
dragtable サンプル

1番左の列を固定にし、2番目以降の列をドラッグ&ドロップにて入れ替え



ソースは こちら よりダウンロードできます。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL