Drag & Drop com PHP e jQuery

JQuery
JQuery (Photo credit: Wikipedia)

A capacidade de arrastar e soltar conteúdo de uma página e ter que salvar a ordem de usuário, é realmente grande e relativamente fácil de executar com algumas linhas de jQuery. Você precisa incluir a biblioteca de jQuery, que você pode encontrar aqui: jQuery API do Google. Todos os arquivos necessários para obter a instalação e funcionamento estão no final deste post.

Neste tutorial vamos olhar para 2 páginas principais do PHP. a página index.php, que contém o conteúdo e funcionalidades para executar a arrastar e soltar o arquivo e updateList.php que é um simples pedaço de código para atualizar a coluna listOrder no banco de dados usando PHP e MySQL. Além disso, você terá que adicionar os seus dados de banco de dados para o arquivo connect.php que está no final do post.

O Código

$(document).ready(function(){
 function slideout(){
 setTimeout(function(){
 $("#response").slideUp("slow", function () { });}, 2000);}
 $("#response").hide();
 $(function() {
 $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
 var order = $(this).sortable("serialize") + '&update=update';
 $.post("updateList.php", order, function(theResponse){
 $("#response").html(theResponse);
 $("#response").slideDown('slow');
 slideout();
 });
 }
 });
 });
 });

Aqui está um resumo do que está acontecendo no código acima.

Para começar, temos uma função simples que irá deslizar até a “response” div que contém a mensagem de uma vez os dados são salvos no banco de dados.

Em seguida, mover para a seção que nos permite arrastar e soltar as caixas. Em seguida, defina a “ordem” a variável que contém os dados a serem postadas via aj