ドラッグ＆ドロップで並べ替えた順番を送信

jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。
「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。

実装例（サンプル）

• 項目名 A (項目ID:1)
• 項目名 B (項目ID:2)
• 項目名 C (項目ID:3)
• 項目名 D (項目ID:4)
• 項目名 E (項目ID:5)

実装例の動作について

1. 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。
2. 「この並び順を送信」ボタンを押すと、
   項目名 B (項目ID:2)
   項目名 A (項目ID:1)
   項目名 C (項目ID:3)
   項目名 D (項目ID:4)
   項目名 E (項目ID:5)
   【この順番でよろしいですか？】

   という内容の確認ダイアログが出現する。

3. 確認ダイアログ内で、「OK」を選択した場合、送信を実行し、確認ダイアログ内で、「キャンセル」を選択した場合は、送信を中止する。送信するのは、「項目ID:」の後の数字のみで、「2,1,3,4,5,」となる。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

送信先について

この部分の送信先は、それぞれの用途に応じて変更する必要がある。
例えば、PHP の場合、

Perl の場合、

など。

CSS

HTML