Update the database when drag and drop row

View code looks like here:

<div id="tabs">
        <div class="col-md-12" id="current">
            @include('cms.public.views.partials._messages')         
            <div id="table1">
              <table class="table">
                <thead style="color:white">
                  <tr>
                    <th><a href=""><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>ID<a href=""><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
                    <th><a href=""><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>SLUG<a href=""><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a></th>
                    <th><a href=""><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>ORDER<a href=""><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a></th>
                    <th><a href=""><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>PUBLIC<a href=""><span class="glyphicon glyphicon-arrow-down" id="orderByPublicDesc"></span></a></th>
                    <th><span class="glyphicon glyphicon-cog"></span></th>
                  </tr>
                </thead>
                <tbody style="color:white">
                  @foreach ($projects as $key => $project)
                    <tr>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td><a href="" class="btn btn-info btn-sm">View</a> <a href="" class="btn btn-success btn-sm">Edit</a></td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              <br><br>
            </div>
        </div>
</div>

And jquery code looks like here:

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone"
}).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

I will be more detailed so that you understand me better and you can help me.

The view is sorted by the 'order' field and the data is displayed like this:

Id - pepito- 29 - public

Id - slug - 28 - public

Id - slug - 27 - public

Id - slug - 26 - public

Id - slug - 25 - public

Id - slug - 24 - public and even the

Id - lastpepito- 1 - public

If I drag for example, the one with the 'order' field = 1 at the top of the view looks like this:

id - ultimopepito- 1 - public

id - pepito- 29 - public, etc.

The idea would be to update the data when doing the 'drop' and looked like this:

id - ultimopepito - 29 - public

id - pepito - 28 - public, etc

For this, when doing the 'drop' you have to update the data automatically.

I think this could be done: Take the order of the drag and take the order of the drop. If the move is up I would subtract one from the ones below the drop and vice versa, the problem is that I do not have the knowledge to do this.

Any help will be really appreciated.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2irkzrO
via IFTTT