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のテスト環境にとても便利です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です