テーブルの行をドラッグ＆ドロップで並び替えるJqueryプラグインにはまった

テーブルの行をドラッグ＆ドロップで並び替えるJqueryプラグイン2選

1つはjqueryULのsorttable、もう一つはtabledndというプラグイン。両方、tableと名はついていますが、tableである必要はなく、要素を並べ替えらるプラグインです。
2つともには、はまってしまいました。

はまった条件は、総ての行にthを使っていたこと（はまったのはtablednd）、tableのクラスをセレクタに使ったこと（こっちはsorttable）です。

はまった手法

<table class="foo">
  <tr>
    <th>見出し１</th><th>見出し２</th><th>見出し３</th>
  </tr>
  <tr>
    <th>見出しa</th><td></td><td></td>
  </tr>
  <tr>
    <th>見出しb</th><td>></td><td></td>
  </tr>
  </table>

見出し１	見出し２	見出し３
見出しa
見出しb

jqueryとそれぞれのプラグインを読み込み、
sorttableだと
https://jqueryui.com/

$(function() {
    $('.foo').sorttable();
});

tabledndだと
https://github.com/isocra/TableDnD

$(function(){
  $(".foo").tableDnD();
});

で動くはずだったのに、動かない。

わかったこと

tablednd

• jquery1系、jquery2系、jquery3系すべてに使用可
• thが含まれる行は、初期値では固定となり動かせない

左側のセルをthにする場合、動かなくなることに留意が必要。

sorttable

• <table class="foo"><tr>……としていても
  $('.foo').sorttable();ではなく、
  $(".foo tbody").sorttable();とすべし

$(function() {
    $('.foo tbody').sorttable();
});

こっちなら動きます。
tbody！！
そう思ってみると、参考にしたサイトでは、tableではなく、tbodyにクラス名が見本サイトにはついています。普段、tbodyを書かない方、要注意です。
公式サイトではul>liで、liを動かしていました。ソースよりも、dom上の親要素をセレクタにということです。

See the Pen
BaNdqbP by kazu-1 (@kazu-1)
on CodePen.