railsでドラックアンドドロップで並び替えを行いたい。

Question

faq_categoryというテーブルでparent_idを持たせ紐付け、ツリー構造のように子カテゴリーがあれば永遠に表示できるようにし、また、orderというカラムを持たせ、一番大元のカテゴリーでドラックアンドドロップにより並び替えを行えるようにしたいです。
これが完成させたいデザインになります。
会員登録と出品という大きなカテゴリーで並び替えを行えるようにしたいです。

現在renderをネストして、子カテゴリーがある場合は無限に表示できるように実装しました。

それがこんな感じです。
tableとして表示してみたものがこちらです。
うまく表示できていません。

試しにJSのsortableを実装してみて保存はできませんがUIだけ並び替えられるようにしてみたのですが、子カテゴリーまで並び替えることができてしまい困っています。
また、並び替えの実装はしたことがないため、実装の仕方が全然わからないので
https://qiita.com/jnchito/items/391fb16d3f69fda9bdae
このサイトをみてやろうと思ったのですが、他の実装の並び替えを見ると、RankedModelは使わずに実装していました。

まずrenderを入れ子にしていて大カテゴリーでドラックアンドドロップのソートを行うというのは可能でしょうか？またいい並び替えのサイトなどあったらお願いいたします。
以下コードになります。

view(index.html.slim)

h3
  = render partial: 'faq_categories', locals: {faq_categories: @faq_categories}

view(_faq_categories.html.slim)テーブル表記

table
      thred
        tr
          th 
          th 
          th
      tbody.sortable
        - faq_categories.each do |faq_category|
          tr       
            td = faq_category.title
            td 
              - if FaqCategory.where(parent_id: faq_category.id).present?
                  - faq_categories = FaqCategory.where(parent_id: faq_category.id)
                  == render 'faq_categories', faq_categories: faq_categories
            td = link_to '編集'

リスト表記

.sortable
    ul
      - faq_categories.each do |faq_category|
        p = faq_category.title
        - if FaqCategory.where(parent_id: faq_category.id).present?
          - faq_categories = FaqCategory.where(parent_id: faq_category.id)
          == render 'faq_categories', faq_categories: faq_categories

cssとJS(slimのインライン)

sass:
  .sortable
    padding: 8px 8px 0 32px
    //border: 1px solid
    
    
javascript:
  $(function() {
    $(".sortable").sortable();
  });

controller

def index
    @faq_categories = FaqCategory.where(parent_id: nil)
  end

初心者ですみませんよろしくお願いいたします。

PS：renderの入れ子で参考にしたサイトはこちらです。
https://ja.stackoverflow.com/questions/18744/%E5%85%A5%E3%82%8C%E5%AD%90%E3%83%A2%E3%83%87%E3%83%AB%E3%81%A7%E7%84%A1%E9%99%90%E3%83%AB%E3%83%BC%E3%83%97%E3%82%92%E3%81%95%E3%81%91%E3%81%AA%E3%81%8C%E3%82%89-%E6%B7%B1%E3%81%84%E9%9A%8E%E5%B1%A4%E3%81%BE%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%84-%E4%B8%80%E9%83%A8%E3%82%B3%E3%83%BC%E3%83%89%E3%81%82%E3%82%8A