将可排序的 jQuery 顺序发送到 Laravel 控制器

Question

我有一个 Article 对象的集合，这些对象具有公共属性 int priority。此字段用于按预期顺序显示文章。但是，我希望能够重新排列管理区域中文章的顺序。

我包含了 jQuery 和这个 Laravel/Blade sn-p

<ul class="selectable-demo-list" id="sortable-list-basic">
    @FOREACH($articles as $article)
        <li> {{ $article->label}} </li>
    @ENDFOREACH
</ul>

我可以生成这个 HTML 输出：

<ul class="selectable-demo-list" id="sortable-list-basic">
    <li> My article (ID: 1) </li>
    <li> Another article (ID: 2) </li>
    <li> ... </li>
</ul>

如果这些元素应该包含在代码中，我可以通过 $article->priority 访问相应的优先级，并通过 $article->id 访问它们的唯一 ID。

上面发布的<ul> 正确呈现：所有<li> 元素都显示为可排序的jQuery 元素。如果我将一个项目拖到某个位置，它会暂时停留在那里。

不幸的是，我不知道如何保存新订单（= 根据列表位置更新项目优先级）。

这不应该直接完成。相反，我想使用更新按钮。也许我可以使用表单并将这样的数组发送到我的控制器：

$priorities = [1=>3; 2=>1; 3=>2] // ID => new priority

这可能吗？还是我应该使用不同的方法？非常感谢任何帮助！

Answer 1

1. 在每个 li 中添加 id，例如 id="id-{{ $article['id'] }}"

2. 当您使用这个可排序插件更改任何订单时，您可以调用 ajax 请求，如下面的代码

    $("#sortable-list-basic").sortable({
      update: function (e, u) {
       var data = $(this).sortable('serialize');
       $.ajax({
           url: "{{ url('controller/sorting_method') }}",
           type: 'post',
           data: data,
           success: function (result) {
   
           },
           complete: function () {
   
           }
       });
     }
   
   });
   

3. 然后在您的方法中，为每个项目获取新订单并将其保存到数据库，例如

      $ids = $request->id;
   
      foreach($ids as $order => $id){
       $article = Article::findOrFail($id);
       $article->order = $order;
       $article->save();
      }