Jquery 如何实现子类别的拖放排序？

我正在尝试在类别列表中使用拖放。但它只在父类别中工作。如何实现子类别的拖放

这是我的分类表

| id | title | parent_id  | order | created_at |

这是我的分类模型看起来像

public function childs() {
        return $this->hasMany('App\Category','parent_id','id') ;
}

这是我的分类/index.blade.php

 <ul id="categorycontents">
 @foreach($categories as $category)
     <li class="category-sortable" data-id="{{ $category->id }}">
             <i class="fas fa-sort"></i>  {{ $category->title }}
            @include('category.child-category',['childs' => $category->childs])
     </li>
 @endforeach
</ul>

<ul>
    @foreach($childs as $child)
    <li class="child">
        {{ $child->title }}
    </li>
    @endforeach
</ul>
<div class="clearfix"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $( "#categorycontents" ).sortable({
                items: ".category-sortable",
                cursor: 'all-scroll',
                opacity: 0.6,
                placeholder:"highlights",
                forcePlaceholderSize: true,
                update: function() {
                    sendOrderToServer();
                }
            });
            function sendOrderToServer() {
                var order = [];
                var token = $('meta[name="csrf-token"]').attr('content');
                $('li.category-sortable').each(function(index,element) {
                    order.push({
                        id: $(this).attr('data-id'),
                        position: index+1
                    });
                });
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{ route('category.sortable') }}",
                    data: {
                        order: order,
                        _token: token
                    },
                    success: function(response) {
                        if (response.status == "success") {
                            console.log(response);
                        } else {
                            console.log(response);
                        }
                    }
                });
            }
        });
    </script>

Route::post('category-sortable','PostController@categorySortable')->name('category.sortable'); //Route

  public function categorySortable(Request $request)
    {
        $categories = Category::get();
        foreach ($categories as $category) {
            foreach ($request->order as $order) {
                if ($order['id'] == $category->id) {
                    $category->update(['order' => $order['position']]);
                }
            }
        }
        return response('Update Successfully.', 200);
    }