Utilizo la función jQuery ui ordenable. Con este
$(".draggable-right").sortable({ connectWith: ".connected-sortable", update: function(event, ui) { var ordine_video = $(this).sortable('toArray', { attribute: 'data-id' }); // POST to server using $.post or $.ajax $.ajax({ data: { 'ordine_video': ordine_video, }, type: 'post', dataType: 'json', url: 'save_playlist.php' }); // alert(idsInOrder); console.log(ordine_video); }, }).disableSelection();Puedo pasar una matriz con atributos: valores de identificación de datos en matrices como
["BMPR-00026.mp4", "BMPR-00026.mp4"]Si quiero pasar una matriz como esta con clave y valor
{"BMPR-00026.mp4":"value_1", "BMPR-00026.mp4": "value_2"}como se puede hacer tengo el campo en
<li class="ui-sortable-handle" data-id="BMPR-00026.mp4" style="" rel="value_1">element</li> <li class="ui-sortable-handle" data-id="BMPR-00026.mp4" style="" rel="value_2">element</li>Considera lo siguiente.
function serializeList(list) { var results = {}; $("li", list).each(function(i, el) { results[$(el).attr("data-id")] = $(el).attr("rel"); }); return results; } $(".draggable-right").sortable({ connectWith: ".connected-sortable", update: function(event, ui) { var ordine_video = serializeList(this); $.ajax({ data: { 'ordine_video': ordine_video, }, type: 'post', dataType: 'json', url: 'save_playlist.php' }); console.log(ordine_video); } }).disableSelection();Esto crea una función, a la que puede pasar una lista y iterará cada elemento de la lista para crear un objeto.
Hay una advertencia, cada data-id debe ser única. Al igual que:
{ "BMPR-00026.mp4": "value_1", "BMPR-00027.mp4": "value_2" }Si son iguales, el valor de ese índice se actualizará en lugar de agregar una nueva entrada.