テーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」

2017/02/17

こんにちは。
今回はテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」です。

テーブルの列や行をドラッグ&ドロップで入れ替えられるスクリプトを紹介します。

※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

テーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」

TableDragger

table-dragger

 

TableDraggerをダウンロードしてみよう!

https://github.com/sindu12jun/table-draggerにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

TableDraggerを設置してみよう!

html部分を記述します。
idを指定しますよ。

[html]

header1header2header3
conten1conten2conten3

[/html]

 

先程ダウンロードしたtable-dragger.min.jsを/bodyの手前に読み込みます。

[html]

[/html]

 

その下に下記のスクリプトを記述します。
先程指定したidを記述しますよ。

[javascript]
tableDragger(document.querySelector(“#table”));
[/javascript]

 

デフォルトだと列を入れ替えることしかできませんがオプションで行を入れ替えたり、列と行の両方を入れ替えることもできますよ。

 

JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本

 

ユーザーやクライアントが入れ替えられるので便利ですね。
以上でテーブルの列や行をドラッグ&ドロップで入れ替えられるJSライブラリ「TableDragger」でした。

Topへ戻る