!++++
Ver.5 [ 機能を見る ] [ 機能設定を見る ]
Ver.6 [ 機能を見る ] [ 機能設定を見る ]
!----
1. はじめに
Client-side JavaScript に処理を追加することで、明細ブロック内の行をドラッグ＆ドロップで並び替えることも可能です。
このページでは、その動作を確認できるサンプルをご紹介します。
2. サンプル機能の内容と確認ポイント
本サンプルでは、ドラッグ＆ドロップ操作による明細行の並び替えを実装しています。
dragstart、dragover、dropの各イベントを設定し、行を並び替えた後、SORTNOフィールドにソート順が記録される仕組みとなっています。
また、V5のサンプルでは、jQuery UIライブラリを使用して、テーブルのドラッグ＆ドロップ操作を実現しています。
🔍 確認いただけるポイント
- 行をドラッグ＆ドロップして、順番を変更できること
- 行の順番を変更した後、「付番」ボタンを押すことで「#」列の連番が正しく更新されること
- 順番変更後に「確定」ボタンを押下すると、変更後の順番が保存されること
- ※「検索」実行後も、変更した順番が保持されていること
3. 画面イメージ
下記は、ドラッグ＆ドロップで最下部の行を最上部に移動した際の状態を示しています。
行の移動開始
行の移動後
!++++
使用したコード一覧
!----