Galeria classificável para banco de dados

Sempre quis criar uma galeria classificável e salvar seu pedido no banco de dados para seus usuários?
Ai está.

Usaremos HTML para estrutura de página, jQuery para solicitação AJAX, PHP para buscar dados e MySQL para inserir dados em nosso banco de dados. <br>
Alguns passos simples aqui e um link para uma demonstração e também uma página de download.

Marcação HTML

<button class="save">Save order</button>        
<ul class="sortable">
  <li id='item-1'><img src="images/photos/1.jpg" alt=""></li>
  <li id='item-2'><img src="images/photos/2.jpg" alt=""></li>
  <li id='item-3'><img src="images/photos/3.jpg" alt=""></li>
  <li id='item-4'><img src="images/photos/4.jpg" alt=""></li>
  <li id='item-5'><img src="images/photos/5.jpg" alt=""></li>
  <li id='item-6'><img src="images/photos/6.jpg" alt=""></li>
</ul>

Coisas jQuery
Usando a biblioteca jQuery e jQueryUI, faremos listas classificáveis .sortable .

ul_sortable.sortable({
 revert: 100,
 placeholder: 'placeholder'
});
ul_sortable.disableSelection();

Agora o AJAX

btn_save.on('click', function(e){
  e.preventDefault(); 
  var sortable_data = ul_sortable.sortable('serialize'); 

  $.ajax({ 
    data: sortable_data,
    type: 'POST',
    url: 'save.php', // save.php - file with database update
  });        
});

Antes de enviarmos os dados por meio do arquivo PHP (save.php), temos que serializar os dados, o que significa que temos que converter os elementos da lista não ordenada coletados em um Array, para que nosso arquivo PHP os leia com facilidade.

Finalmente, o PHP com MySQL

$order = 0;
if($connect_to_db){
  foreach ( $array_items as $item) {
    $update = "UPDATE $db_table SET ord = '$order' WHERE id='$item' ";
    $perform = mysql_query( $update ); 
    $order++; 
    echo mysql_error();
  }
} else {
  echo 'Connection error';
}

Conclusão <br>
Usando jQuery AJAX, estamos enviando a lista não ordenada como um Array. Bem desse jeito:

item[]=1&item[]=2&item[]=3&item[]=4&item[]=5&item[]=6 

Em seguida, buscamos com PHP e executamos um loop. O loop coloca um número entre colchetes

$order => item[$order]=1

Para que o elemento item igual a, por exemplo, 1 tenha uma ordem de: $ order.

Demonstração ao vivo <br>
Link

Baixar <br>
Link