William Luis

0 %
William Luis
Fullstack Developer
  • Residence:
    Canada
  • City:
    Toronto
  • Age:
    26
French
English
Spanish
html
CSS
Js
PHP
WordPress
  • Bootstrap, Materialize
  • Stylus, Sass, Less
  • Gulp, Webpack, Grunt
  • GIT knowledge

Drag & Drop com PHP e jQuery

11 de julho de 2012
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

[sourcecode language=”javascript”]
$(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();
});
}
});
});
});

[/sourcecode]

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.

[sourcecode language=”php”]
<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>
[/sourcecode]

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.

[sourcecode language=”php”]
<?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’;
}
?>

[/sourcecode]

Demostração

Baixar Script

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

Posted in Dicas, Drag & Drop, JQuery, PluginsTags:
Write a comment