ajax - Laravel Ajax 可排序？

Question

使用 jquery ui 实现排序。移动一个元素时，其余元素的位置会自动更新。用代码告诉我，这样当你移动一个元素时，只有它的位置会改变刀片

<ol id="slippylist">
    <ul class="sortable-ul">
        @foreach($contents as $content)
            <li class="demo-no-swipe" aria-role="option" tabindex="-1" data-link-id="{{ $content->content_id }}"><span class="instant">@if($content->content_type == '1') Текстовый блок @elseif($content->content_type == '2') Ссылка @elseif($content->content_type == '3') Вопросы и ответы @elseif($content->content_type == '4') Аватарка @elseif($content->content_type == '5') Соц.сети @elseif($content->content_type == '6') Видео @elseif($content->content_type == '7') Карта @elseif($content->content_type == '8') Страница @endif</span><button class="btn btn-w-md btn-shadow btn-primary mr-3 mb-5">Изменить</button></li>
            <input type="hidden" name="content[sort][]" value="{{ $content->content_id }}">
        @endforeach
    </ul>
</ol>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
    $('.sortable-ul').sortable({
        stop: function() {
            $.ajax({
                url: '{{ route('sortable') }}',
                method: 'POST',
                headers: {
                    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                },
                data: $('.sortable-ul input').serialize()
            });
        }
    });
</script>

控制器

public function sortable(Request $request) {
   $user = Auth::user();
   $shop = Shop::where('user_id', $user->id)->first();
   $i = 1;
   foreach($request->input('content.sort') as $order){
      $content = Content::where('shop_id', $shop->shop_id)->where('content_id', $order)->update(['content_position' => $i]);
      $i++;
   }
}

标签： ajaxlaraveljquery-ui-sortable