Send order of jQuery sortable to Laravel controller

Question

I have a collection of Article objects that have a public attribute int priority. This field ist used to display the articles in the intended order. However, I'd like to be able to rearrange the order of the articles in the admin area.

I included jQuery and with this Laravel/Blade snippet

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

I can produce this HTML output:

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

I can access the respective priority via $article->priority and their unique IDs via $article->id if these elements should be included in the code.

The <ul> posted above is rendered correctly: All <li> elements are displayed as sortable jQuery elements. If I drag an item to a certain position, it stays there for the time being.

Unfortunately, I have no idea how to save the new order (= update the items priorities according to the list positions).

This shouldn't be done directly. Instead, I want to use an update button. Maybe I can use a form and send an array like this to my controller:

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

Is this possible? Or should I use a different approach? Any help is greatly appreciated!

Answer 1

1. Add id with each of your li like id="id-{{ $article['id'] }}"

2. You can call an ajax request when you are changing any order using this sortable plugin like below code

    $("#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. Then inside your method, take your new order for each item & save it to database such as

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