如何使用 SortableJS for jQuery 和 AJAX 更改类别的订单 ID？

Question

我正在尝试将这个名为SortableJS 的JavaScript 库与 jQuery 和jQuery SortableJS一起使用。我有前端功能工作，但我的问题是试图让它与 AJAX 请求成功工作。

我添加console.log('test')以查看是否可以从 AJAX 请求中获得任何结果，但没有显示任何结果。这也让我相信我的问题与 AJAX 有关。

JavaScript

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>

<script>

$(document).ready(function(){

    $("#sortable-cards").sortable({

        animation: 350,

        easing: "cubic-bezier(1, 0, 0, 1)",

        stop: function() {

            $.map($(this).find('.col-lg-4'), function(el) {

                var id = el.id;

                var order = $(el).index();

                $.ajax({

                    url: '{{route('manage.orderCategories')}}',

                    type: 'POST',

                    data: {

                        id: id,

                        order: order

                    },

                });

            });

        }

    });

});

<script>

我的刀片文件中的可排序卡片 Div

<div id="sortable-cards" class="row justify-content-center">

    @foreach($categories as $category)

    <div id="{{$category->order}}" class="col-lg-4 col-12 mt-4">

        <div class="card shadow">

            <div class="card-body">

                <h3>{{$category->name}}

                <p class="text-muted">{{$category->description}}<p>

                ID: {{$category->id}}<br>

                Order: {{$category->order}}<br>

            </div>

        </div>

    </div>

    @endforeach

</div>

路线

Route::post('categories/orderCategories', 'Manage\ManageCategoriesController@orderCategories')->name('orderCategories');

控制器

public function orderCategories()

{

    $categories = Category::orderBy('order', 'ASC')->get();

    $id = Input::get('id');

    $order = Input::get('order');

    foreach ($categories as $item) {

        return Category::where('id', '=', $id)->update(array('order' => $order));

    }

}

预期的结果是当一个可排序的卡片被移动时，它会向控制器发送一个 AJAX 请求并更新数据库中的“订单”列。就像我之前提到的，前端功能运行良好，并且没有出现错误消息。如果您需要更多信息，请告诉我。感谢您的帮助