Drag & Drop com PHP e jQuery
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 ajax para o nosso script de atualização de banco de dados.
Uma vez que o pedido tenha sido executado ajax que em seguida, exibir a resposta na div #response
Esta é a seção na página index.php que recupera os resultados do banco de dados na ordem correta.
<div id="list"> <div id="response"> </div> <ul> <?php include("connect.php"); $query = "SELECT id, text FROM dragdrop ORDER BY listorder ASC"; $result = mysql_query($query); while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ $id = stripslashes($row['id']); $text = stripslashes($row['text']); ?> <li id="arrayorder_<?php echo $id;?>"> <?php echo $id;?> <?php echo $text;?> <div class="clear"></div> </li> <?php } ?> </ul> </div>
Abaixo está o código da ‘updateList.php’ file. Sua auto-explicativo bastante, temos um script de atualização MySQL embrulhado com um laço foreach que adiciona o número de ordem da lista no banco de dados de eco e é a resposta.
<?php include("connect.php"); $array = $_POST['arrayorder']; if ($_POST['update'] == "update"){ $count = 1; foreach ($array as $idval) { $query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval; mysql_query($query) or die('Error, insert query failed'); $count ++; } echo 'All saved! refresh the page to see the changes'; } ?>