如何使用 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(){&nbsp; &nbsp; $("#sortable-cards").sortable({&nbsp; &nbsp; &nbsp; &nbsp; animation: 350,&nbsp; &nbsp; &nbsp; &nbsp; easing: "cubic-bezier(1, 0, 0, 1)",&nbsp; &nbsp; &nbsp; &nbsp; store: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set: function (sortable) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var order = sortable.toArray();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(order);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajaxSetup({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '{{route('manage.orderCategories')}}',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: order,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Success');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Fail');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});