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 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';
 }
?>

Demostração

Baixar Script

Fonte: http://papermashup.com/drag-drop-with-php-jquery/

wiliamluis

Deixe sua resposta