ドラッグ&ドロップでテーブルの列を入れ替える - 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

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

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

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

コメント(必須)

Trackback URL