如何使用 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 请求并更新数据库中的“订单”列。就像我之前提到的，前端功能运行良好，并且没有出现错误消息。如果您需要更多信息，请告诉我。感谢您的帮助

Answer 1

经过更多的挖掘，我找到了解决方案，而不是使用 jQuery 函数，我必须使用 SortableJS 的内置toArray()函数来获取“#sortable-cards”的更新列表。该toArray()函数用于data-id代替id您的 div、li 等。这里有更多关于此的信息。

JavaScript

$(document).ready(function(){

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

        animation: 350,

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

        store: {

            set: function (sortable) {

                var order = sortable.toArray();

                console.log(order);

                $.ajaxSetup({

                    headers: {

                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                    }

                });

                $.ajax({

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

                    type: 'POST',

                    data: order,

                    success: function(data){

                        console.log('Success');

                    },

                    error: function(){

                        console.log('Fail');

                    }

                });

            }

        }

    });

});