Laravel SortableJS AJAX - 如何重新排列顺序答案

【问题标题】：Laravel SortableJS AJAX - How to rearrange orderLaravel SortableJS AJAX - 如何重新排列顺序
【发布时间】：2020-04-18 07:16:22
【问题描述】：

我刚刚在我的 Laravel 项目中实现了 SortableJS，并且想重新排列一些元素的顺序。我有一个“块”列表，它们都有一个“订单”数据库字段，它是一个整数。我根据“订单”字段的值按降序显示这些块。

现在我想通过使用 Ajax 的 SortableJS 更新这些值。我怎样才能做到这一点？

目前，我有一个简单的列表

<div class="block-order-list">
   @foreach($blocks as $block)
     <div class="list-group-item"><i class="far fa-arrows handle mr-3"></i> {{$block->name}}</div>
   @endforeach
</div>

然后像这样调用 Ajax 请求：

$('.block-order-list').sortable({
            animation: 150,
            handle: '.handle',
            store: {
                set: function (sortable) {
                    let order = sortable.toArray();
                    console.log(order);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '{{ route('change_order', ['url', $page->url]) }}',
                        type: 'POST',
                        data: order,
                        success: function(data){
                            console.log(data)
                        }
                    })
                }
            }
        });

到我的 PageController 包含

 public function changeOrder($data)
    {

        return $data;
    }

请求现在只返回一个字符串，上面写着url，我觉得这很奇怪。在 ajax 请求的 url 中，我提供了一个名为 URL 的参数，我需要找到附加到此特定页面的块。我的块数据库表是这样的

我怎样才能做到这一点？

【问题讨论】：

标签： javascript php ajax laravel jquery-ui-sortable

【解决方案1】：

我猜你必须在你的 HTML 列表中使用 ID ：

<div class="block-order-list">
   @foreach($blocks as $block)
     <div class="list-group-item" data-id="{{ $block->id }}>
          <i class="far fa-arrows handle mr-3"></i> {{ $block->name }}
     </div>
   @endforeach
</div>

然后在你的 JS 中，构建一个 ID => order 的数组：

let order = {};
$('.list-group-item').each(function() {
    order[$(this).data('id')] = $(this).index();
});

然后在你的 ajax 调用中：

 $.ajax({
    url: '{{ route('change_order', ['url', $page->url]) }}',
    type: 'POST',
    data: {order: order},
    success: function(data){
        console.log(data)
    }
})

在你的控制器中：

public function changeOrder(Request $request)
{
    foreach($request->get('order') as $id => $order) {
        Block::find($id)->update(['order' => $order]);
    }
}

【讨论】：