Olá, hoje postarei um código com jquery e php para posiciobar objetos com drag and drop do jquery ui, neste exemplo podemos ver os elementos subindo ou descendo e atualizando em tempo real no nosso banco de dados, assim se o usuario tiver algum problema na hora com a internet ou o pc desligar, rss tudo é possível, mas ao menos terá as posições dos objetos salvas.
Podemos imaginar inúmeras possibilidades de utilizarmos esta aplicação, um menu personalizado, uma galeria de imagens, um jogo de quebra cabeça, um programa online de criação de sites.
Para nosso exemplo vou criar uma ul, com as letras a,b e c, nesta ordem, mas podemos mudar esta posição apenas clicando e arrastando as letras,
Para começar vamos chamar o jquery e o jquery ui
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.min.css">
Os arquivos do jquery ui odem ser baixados na própria página do jquery ui: https://jqueryui.com/
Bom precisamos criar uma tabela no banco de dados com a seguinte estrutura:
CREATE TABLE posicoes (
id int(11) NOT NULL auto_increment,
nome varchar(200) NOT NULL default '',
posicao int(2) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;
Vamos inserir alguns valores:
INSERT INTO posicoes VALUES (5, 'a', 1);
INSERT INTO posicoes VALUES (6, 'b', 2);
INSERT INTO posicoes VALUES (7, 'c', 3);
Agora dentro da ul vamos listar todos os campos, detalhe, teremos sempre as posições normais dos objetos no html, portanto 1,2,3,4,5,6 ... não importando como esteja no banco
Por isso criamos um laço dentro do nosso código que irá impriir as devidas poriçoes dos objetos na página:
<?php
$busca = mysql_query("select * from posicoes order by posicao asc");
while($linha = mysql_fetch_array($busca)) {
$array[] = $linha['nome'];
}
?>
<?php
for ($i=0; $i<=count($array); $i++) {
if ($array[$i] != "") {
?>
<li id="<?php echo $i; ?>"> <a href="<?php echo $array[$i]; ?>" id="<?php echo $array[$i]; ?>" class="drag"> <?php echo $array[$i]; ?> </a> </li>
<?php } } ?>
</ul>
Aqui está o código jquery que vai enviar o nome e a posição do objeto:
$(document).ready(function() {
$(".drag").css("cursor", "move");
$(".drag").draggable();
$("li").droppable({
drop: function (evento, ui) {
var nome = ui.draggable.attr("href");
var posicao = $(this).attr("id");
$.get("adicionar.php",{nome:nome, posicao:posicao}, function (resposta) {
$("#retorno").html(resposta);
location.href = "index.php";
});
}
});
});
Você pode incluir um elemento para receber algum aviso, tipo "posições atualizadas", opcional.
Perceba que montamos um array com os nomes da tabela posições, e a partir dele listamos os objetos na página, isso poruque precisamos pegar os objetos em ordem pelo campo posicao.
Vamos partir para a parte mais complicada, nossa página php que vai atualizar as posições no banco
Primeiro recebemos o nome do objeto e a posição do objeto na página
$chave = $_GET['nome'];
$posicao = $_GET['posicao'];
Vamos montar novamente o array com os nomes ou melhor letras:
$busca = mysql_query("select nome from posicoes");
while($linha = mysql_fetch_array($busca)) {
$array[] = $linha['nome'];
}
Para evitar erros inclua também este código:
Lembre-se desye código em aplicações, é muito útil
$key = array_search($chave, $array);
if($key!==false){
unset($array[$key]);
}
Para evitar possíveis elementos vazios no seu array
Agora vamos para a parte interessante do nosso código
array_splice($array,$posicao,0,array($chave));
Esta função array_slice faz uma substituição nas posições do arra y, ainda bem que ela existe rsss, pois caso contrário iriamos quebrar nossa cabeça para criar um algoritmo bemmmmmmmm extenso.
bom no caso vamos substituimos na posição enviada pela nova posição.
bom para concluir só falta atualizar no banco, neste caso vamos utilizar um laço, pois vamos redefinir as posições, portanto percorreremos todo o array com esta posiçoes que foram atualizadas:
for ($i=0; $i<=count($array);$i++) {
if ($array[$i] != "") {
$num = $i;
$num++;
$atualizar = mysql_query("update posicoes set nome = '".utf8_decode($array[$i])."' where posicao = '".$num."'") or die(mysql_error());
}
}
Lembra do campo opcional? aquele que vai mostrar as informações? no meu caso vou colocar uma mensagem dizendo que as informações foram atualizadas:
if ($atualizar) {
echo utf8_encode("Posições atualizadas");
} else {
echo "Falha ao atulizar";
}
Nenhum comentário:
Postar um comentário