Ordenar filas desde una tabla arrastrandolas

Para ordenar registros listados en una tabla solo con arrastrar las filas (drag & drop). Necesitaremos jQuery y jQuery UI.

Ejemplo de tabla:

<table class="table" id="products_a">
o<thead>
o<tr>
o<th>
oOrdre
o</th>
o<th>
oProducte
o</th>
o<th></th>
o</tr>
o</thead>
o<tbody>
o<tr data-id="5">
o<td class="priority">
o1
o</td>
o<td>
oProduct A - Leuprolide Acetate
o</td>
o<td>
o<a class="" href="/gp-admin/product/do?modify=5" title="Modificar">
o<span class="glyphicon glyphicon-edit"> </span>
o</a>
o<a class="text-danger" href="/gp-admin/product/do?delete=5" title="Eliminar">
o<span class="glyphicon glyphicon-trash"> </span>
o</a>
o</td>
o</tr>
o<tr data-id="6">
o<td class="priority">
o2
o</td>
o<td>
oProduct C - Leuprolide Acetate
o</td>
o<td>
o<a class="" href="/gp-admin/product/do?modify=6" title="Modificar">
o<span class="glyphicon glyphicon-edit"> </span>
o</a>
o<a class="text-danger" href="/gp-admin/product/do?delete=6" title="Eliminar">
o<span class="glyphicon glyphicon-trash"> </span>
o</a>
o</td>
o</tr>
o<tr data-id="7">
o<td class="priority">
o3
o</td>
o<td>
oProduct B - Leuprolide Acetate
o</td>
o<td>
o<a class="" href="/gp-admin/product/do?modify=7" title="Modificar">
o<span class="glyphicon glyphicon-edit"> </span>
o</a>
o<a class="text-danger" href="/gp-admin/product/do?delete=7" title="Eliminar">
o<span class="glyphicon glyphicon-trash"> </span>
o</a>
o</td>
o</tr>
o</tbody>
o</table>

Script jQuery

$(document).ready(function(){= function(e, tr) {
ovar $originals = tr.children();
ovar $helper = tr.clone();
o$helper.children().each(function(index){
o$(this).width($originals.eq(index).width())
o});
oreturn $helper;
o};

ovar myIds = [];
ovar myOrds = [];

o$(".table tbody").sortable({
ohelper: fixHelperModified,
oupdate: function(event, ui) {
o$("#" + $(this).parent('table').attr("id") + " tr").each(function() {
ocount = $(this).parent().children().index($(this)) + 1;
o$(this).find('.priority').html(count);
o});
o},
ostop: function(event, ui) {
o$("#" + $(this).parent('table').attr("id") + " tr").each(function() {
oif($(this).attr("data-id") != undefined){
omyIds.push($(this).attr("data-id"));
omyOrds.push($(this).find('.priority').html());
o}
o});
ovar mixed = [];
omixed.push(myIds);
omixed.push(myOrds);
o$.ajax({
ourl: '/gp-admin/products/order',
odata: {mixed: mixed},
otype: 'POST',
osuccess: function(data){
o//console.log(data);
o}
o});
o}
o}).disableSelection();
o});

Y dos líneas de CSS

.ui-sortable tr {
ocursor: move;
o}
o.ui-sortable tr:hover {
obackground: rgba(0,136,204,0.45);
o}

Y en nuestro controlador usando Laravel para guardar el nuevo orden en la base de datos

public function editOrderProducts(){
        //return json_encode(Input::all(), JSON_PRETTY_PRINT);
        //echo $return['mixed'][0][0];
        $return = Input::all();
        for($a=0; $a<count($return['mixed'][0]); $a++){
            $pro = Product::find($return['mixed'][0][$a]);
            $pro->order = $return['mixed'][1][$a];
            $pro->save();
        }
    }