ドラッグ＆ドロップによりタブの順番を並べ替えられるタブメニュー

jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、ドラッグ＆ドロップにより、タブの順番を、並べ替えられるようにする方法。ドラッグ＆ドロップで並べ替えられるようにするには、Sortable プラグインを併用する。

実装例（サンプル）

実装例の動作について

「タブメニュー①」「タブメニュー②」「タブメニュー③」の、それぞれのタブメニュー名をクリックすると、そのタブメニューの内容を開く。

「タブメニュー①」「タブメニュー②」「タブメニュー③」の、それぞれのタブメニューは、ドラッグ＆ドロップによる並べ替えを行える。「タブメニュー①」をドラッグし、「タブメニュー②」「タブメニュー③」の間に移動すると、「タブメニュー②」が左へ移動し、「タブメニュー②」「タブメニュー③」の間にスペースができる。そのスペースへ「タブメニュー①」をドロップすることで、「タブメニュー②」「タブメニュー①」「タブメニュー③」の順番に変更できる。

実装例のソースコード

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

HTML