jQueryで input要素をマウスで入替

Question

jQueryで テーブル内のinput要素をマウスで入れ替えたいです。
ネット情報では、画像を好きな場所に移動できるサンプルがありますが、やりたいことは、それとは違って、HTML要素を入れ替えることです。JavaScriptで要素を上から順番に取得するとき、入れ替えた要素の順番で取得させたいです。

現在、以下のようなメニュー構造に、CSVからとってきた値を当てはめて表示させていますが、アイテムを好きな位置に移動させて、移動後の順番で要素の値をCSVで保存したいと思います。（CSVでの保存方法は理解しています）

どのような方法があるでしょうか？

<dl>
  <dd class="A">
    <label>menu1</label>
    <input value="001">
  <dl>
    <dd class="A">
		  <label>item 1-1</label>
		  <input value="1-1">
	  <dd class="A">
		  <label>item 1-2</label>
		  <input value="1-2">
    <dd class="A">
      <label>item 2-1</label>
      <input value="2-1">
  </dl>
</dl>

<dl>
  <dd class="A">
    <label>menu2</label>
    <input value="002">
  </dl>
</dl>

Comments

[m.ts10806]

画像もHTMLで表示させるので概念的には同じかと思いますが、今どこまでできているのでしょうか。
さすがに現在の質問内容だと丸投げのようにも思います。
調べたこと、試したことを追記してください。

[teefpc]

語弊のある投稿でした。

Answer 1

jquery-uiを利用してdraggable/droppableで制御すればできますが
dl/dt/ddでの処理は面倒だと思いますよ
あとはsortableのテーブルをつかうとかでしょうかね

Comments

[teefpc]

なるほど。そういうことですね。大変参考になりました！