Como fazer Ordenação Personalizada com JQuery Sortable Passo a Passo

 

Hoje vamos falar sobre JQuery Sortable. Um recurso da API JQuery UI, que permite fazer ordenação personalizada de qualquer objeto ou registro de banco de dados via browser, só clicando e arrastando os itens.

 

A implementação da API não podia ser mais simples.
É só incluir as bibliotecas JQuery e JQuery UI no <head> da página.

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script></pre>

 

E inicializar a API com:

<script>$("#sortable").sortable();</script>

 

$(“#sortable”) é o objeto que contém todos os itens que queremos ordenar, no nosso caso uma <div> com algumas imagens.

 

Mas além de implementar a API, vamos aprender como gravar a nova ordenação em banco de dados, com o evento update, nativo da API.

 

No final da página, tem os códigos dos arquivos da vídeo aula, os links da Documentação Completa da API e assuntos relacionados ao vídeo.

 

 

Espero que goste do tutorial. 🙂 Qualquer dúvida ou sugestão que possa agregar ao conteúdo, deixa nos comentários que eu leio todos. E os comentários sempre ajudam outras pessoas que pesquisam sobre o assunto.

 

 

Até mais e bons estudos.

[VÍDEO] Ordenação com JQuery Sortable

 

Documentação:

JQuery UI – Documentação Completa: https://jqueryui.com/

Sortable: https://jqueryui.com/sortable/

 

Assuntos relacionados:

Conexão entre MySql e PHP com PDO

 

 

index.php

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>

<body>
 <h1>JQUERY SORTABLE</h1>
 <h2>DESCOMPLICANDO A ORDENAÇÃO COM JQUERY</h2>
 
 <div id="sortable">
 
 <?php
 include 'conecta.php';
 $conn = new conecta();
 
 $resultados = $conn->getimagens();
 
 foreach($resultados as $item){
 echo '<img src="imagens/'.$item["imagem"].'" id="'.$item["id"].'"/>';
 }
 ?>

 </div>
 
 <p>Arraste as imagens para ordenar</p>

 <script>
 $("#sortable").sortable({
   update: function(){
     var lista = $('#sortable').sortable('toArray'); 
     $.post("ordenaImagens.php",{imagens:lista}, function(){
        alert('Sucesso');
     });
   }
 });
 </script>
 
</body>
</html>

 

conecta.php

<?php

include_once 'config.php';

class conecta extends config{
 var $pdo;
 
 function __construct(){
    $this->pdo = new PDO('mysql:host='.$this->host.';dbname='.$this->db, $this->usuario, $this->senha); 
 }
 
 function getimagens(){
    $stmt = $this->pdo->prepare('SELECT * FROM imagens order by ordem'); 
    $run = $stmt->execute();
    $rs = $stmt->fetchAll(PDO::FETCH_ASSOC);
    return $rs;
 }
 
 function ordenarImagens($pos, $id){
    $stmt = $this->pdo->prepare("UPDATE imagens set ordem = :pos where id = :id");
    $stmt->bindValue(":pos",$pos);
    $stmt->bindValue(":id",$id);
    $run = $stmt->execute(); 
 }
}
?>


 

ordenaImagens.php

<?php

include 'conecta.php';
$conn = new conecta();

$imagens = $_POST["imagens"];
$pos = 0;

foreach($imagens as $imagem){
   $conn->ordenarImagens($pos,$imagem);
   $pos++;
 
}
?>

 

config.php

<?php

class config{
 var $host = 'hostDB';
 var $usuario = 'userDB';
 var $senha = 'senhaDB';
 var $db = 'nomeDB'; 
}
?>

  1. Ei Alex, Muito bom o tutorial, vai me ajudar muito, pois estou querendo implementar o sortable na minha aplicação.
    segui o seu passo a passo, porem não consegui salvar no banco, acredito que por a minha estrutura de inclusão não é a mesma da sua, e eu não consegui adequar o sortable a forma que vc passou no tutorial.
    poderia mandar o projeto de vídeo para que eu possa analisar e adequar a minha estrutura?

    se possível pode me enviar no e-mail

    desde já agradeço!

  2. Fala Alex, blz? seguinte fiz igualzinho esta o seu, na verdade copiei tudo e colei, as imagens sao listadas mudo de lugar mas não esta gravando no banco. oque pode ser. Aguardo.

Deixe seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *