javascript - 如何使用适用于 jQuery 和 AJAX 的 SortableJS 更改类别的订单 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>

我的 Blade 文件中的可排序卡片 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');

Controller

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));
    }
}

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

Answer 1

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

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');
                    }
                });
            }
        }
    });
});