ここまでの記事でプラグインを作成しておりますが、
プラグインの管理画面で設定する画面では、設定部分をテーブルで表示しています。

▼管理画面イメージ

実際の画面に表示する順番を変更するのに、ドラッグするだけで管理画面上で順番を変えて、
それを登録することで実際の画面上でも順番代わると便利だよね、ということで、
jQueryを利用すれば簡単にできるとのことで、入れてみました。

正確には、jQueryとjQuery UIのSortable メソッドを使う事で簡単に動かすようにすることができます。

WordPressを利用している場合、元々入っているJavaScriptのファイルとして、
「sortable.js」というファイルがあり、この中に処理が書いてあるので、
これを読み込む必要があります。
※ファイルの確認は下記パスを確認！
\wp-includes\js\jquery\ui\sortable.js

そして、実行するためのJavaScriptとして、別のJavaScriptのファイルで
下記を実行します。

※ちなみに、script.jsのファイルを作成してます（\wp-content\plugins\dashicons-list-view\script.js）。

実際にテーブルの記述をしているファイルで、それぞれのJavaScriptのファイルを読み込みます。
私の作ってるプラグインの中では、「\wp-content\plugins\dashicons-list-view\dashicons-list-view.php」のファイルの中で、
「class Dashicons_List_View {}」内に下のコードを書きました。

そして、テーブルのtbodyタグに「id=”sortdata”」を指定します。


これ、tbodyにつけないとちゃんと動かないので、
tableタグの中にすぐtrタグではなく、ちゃんとtheadタグ、tbodyタグで囲んで、
tbodyタグにIDを付けるようにしましょう。


ただ、これだけで動いてくれるので、超便利です！！



今回は、WordPressでの使い方として書きましたが、
jQueryとjQuery UIを使う事で、WordPressじゃないとこでも使えるみたいなので、
また別の機会でも使えたらいいな、と思います。

ちなみに、下記ページの記事を参考にさせて頂きましたm(__)mｱﾘｶﾞﾄｳｺﾞｻﾞｲﾏｽ
https://webllica.com/jquery-ui-table-data-drag-and-drop/