JavaScriptで1つのテーブルの行をドラッグ&ドロップで変更したとき、同時に別のテーブルの行も変更する

HTMLで2つのテーブルを作ったとします。

JavaScriptで1つのテーブルの行をドラッグ&ドロップできるようにします。

この際に、1つのテーブルで行の場所をドラッグ&ドロップで変更した際に、もうひとつのテーブルも同時に変更するプログラムを作ってみたいと思います。

スポンサーリンク

ドラッグ&ドロップするにはjQuery UIのSortableを使う

JavaScriptでドラッグ&ドロップするには、jQuery UI Sortableというライブラリを使います。

このライブラリはjquery-ui.jsの中に入っているようです。

UI Sortableの公式サイトは以下の通りです。

https://jqueryui.com/sortable/

まず、上下に2個のテーブルを作ります。

上のテーブルはドラッグ&ドロップ可能です。

image

上のテーブルの「Row 1 ONE」という行を3行目にドラッグ&ドロップしてみました。

下のテーブルの「Row 1 FIRST」も3行目に移動しました。

image

これが出来ると地味に便利なことがあります。

例えば、上がサマリーテーブルで、下が詳細テーブルとかの例ですかね。

プログラムのソース

プログラムのソースは次の通りです。

HTMLのソースです。

JavaScriptのソースです。

jquery.min.jsとjquery-ui.min.jsを読み込む必要があります。

JSFiddleで実行のテスト

実行のテストはJSFiddleで行えます。

JSFiddleはJavaScriptのテスト環境にとても便利です。

スポンサーリンク
スポンサーリンク
Translate »