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

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

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

TableDragger

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

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

TableDraggerを設置してみよう！

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

[html]

[/html]

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

[html]

[/html]

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

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

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

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

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