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

スポンサーリンク
プログラミング

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

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

 

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

 

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

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

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

 

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

Sortable | jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...

 

 

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

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

 

image

 

 

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

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

image

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

 

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

 

プログラムのソース

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

 

HTMLのソースです。

 

 

JavaScriptのソースです。

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

 

 

JSFiddleで実行のテスト

 

実行のテストは

JSFiddle

で行えます。

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

 

 

プログラミングの無料レッスン体験

 

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp

 

 

 

コメント