I have the following codes
INDEX.PHP
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<a href="javascript:void(0);" class="btn btn-danger outlined mleft_no reorder_link" id="save_reorder">Reordenar</a>
<div id="reorder-helper" class="light_box alert alert-danger" style="display:none;" role="alert"><h6>Reordenação Liberada</h6></div>
</div>
<div class="panel-body">
<ul id="sortable" class="list-group">
<?php
echo $auth_task->select();
?>
</ul>
</div>
<div class="panel-footer">Panel footer</div>
</div><!-- <div class="panel panel-default"> -->
</div><!-- <div class="col-md-6"> -->
</div> <!-- <div class="row"> -->
</section><!-- <section class="content"> -->
SCRIPT.JS
$(function() {
$('.reorder_task').on('click',function(){
$('.reorder_task').html('Salvar');
$('.reorder_task').attr("id","save_reorder");
$('#reorder-helper').slideDown('slow');
$('#sortable').sortable({
axis: 'y',
opacity: 0.7,
handle: 'span',
update: function(event, ui) {
var list_sortable = $(this).sortable('toArray').toString();
$("#save_reorder").click(function( e ){
if( !$("#save_reorder i").length )
{
$(this).html('').prepend('<i class=\"fa fa-spinner fa-spin fa-fw\"></i><span class=\"sr-only\">Loading...</span>').removeClass('btn-danger');
$("#sortable").sortable('destroy');
$("#reorder-helper").html( "<h6>Salvando</h6>");
var list_task = [];
var list_array = [list_sortable];
$.each( list_array, function( index, value ){
list_task += value;
});
console.log(list_task);
$.ajax({
url: './task.php',
type: 'POST',
data: {list_order: list_task },
success: function(data) {
window.location.reload();
}
});//End Ajax
return false;
}//End If
e.preventDefault();
});// End Click
} //End Update
});//End Sortable
});// End Onclick
});
This code is for task reordering, when clicking and Reordering it frees the TAG li for modification (drag & drop), I can drag and click Save to send a POST via AJAX to the bank and all right.
But the main one I can not rearrange several at once can only reorder one at a time, if you sort item 1 and then item 2, it will only save the order of the first one.
Does anyone have any idea of what I can do, to reorder several at the same time?
I've modified the code a bit
I've placed this part:
var list_task = [];
var list_array = [list_sortable];
$.each( list_array, function( index, value ){
list_task += value;
});
When it shows on the console it takes the order of the task and shows 1, 2, 3 ... being able to change to 3, 1, 2 ... and so on, but if you make more than one modification it does not send , {3, 1, 2 ...}, {2, 3, 1 ...}.