Código de la view:
<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="{{route('admin.projects.order', ['field' => 'id','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByIdAsc"></span></a>ID<a href="{{route('admin.projects.order', ['field' => 'id','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByIdDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'slug','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderBySlugAsc"></span></a>SLUG<a href="{{route('admin.projects.order',['field' => 'slug','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderBySlugDown"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'order','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByOrderAsc"></span></a>ORDER<a href="{{route('admin.projects.order', ['field' => 'order','order' => 'desc'])}}"><span class="glyphicon glyphicon-arrow-down" id="orderByOrderDesc"></span></a></th>
<th><a href="{{route('admin.projects.order', ['field' => 'public','order' => 'asc'])}}"><span class="glyphicon glyphicon-arrow-up" id="orderByPublicAsc"></span></a>PUBLIC<a href="{{route('admin.projects.order', ['field' => 'public','order' => 'desc'])}}"><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>{{$project->id}}</td>
<td>{{$project->slug}}</td>
<td>{{$project->order}}</td>
<td>{{$project->public}}</td>
<td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a></td>
</tr>
@endforeach
</tbody>
</table>
<br><br>
</div>
</div>
</div>
Código Jquery:
$("#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();
}
});
Alguien me podría poner algún ejemplo de como actualizar automaticamente los datos de la base de datos, al mover alguna fila?
Actualización
Voy a ser bastante más detallado para que me entendáis mejor y me podáis ayudar.
La vista se ve ordenada por el campo 'order', es decir los datos se muestran asi:
id - pepito- 29 - public
id - slug - 28 - public
id - slug - 27 - public
id - slug - 26 - public
id - slug - 25 - public
id - slug - 24 - public
y así hasta el
id - ultimopepito- 1 - public
Si yo arrastro por ejemplo, el que tiene el campo 'order' = a 1 arriba del todo la vista se ve así:
id - ultimopepito- 1 - public
id - pepito- 29 - public, etc.
La idea seria que se actualizaran los datos al hacer el 'drop' y se viera así:
id - ultimopepito - 29 - public
id - pepito - 28 - public
Para esto, al hacer el 'drop' se tiene que actualizar automaticamente los datos.
Creo que así se podría hacer: Coger el order del drag y coger el order del drop. Si el movimiento es para arriba le restaria uno a los que quedaran por debajo del drop y viceversa, el problema es que no tengo los conocimientos para hacer esto.