0

 WP0034

Ordenação com JQuery Sortable - Passo a Passo


 Assista Agora totalmente grátis
1  
 Autor: Alex Rosa

Como fazer Ordenação com JQuery Sortable e Banco de Dados - Passo a Passo.

Conteúdo Extra
Código

Conteúdo Extra

Bibliotecas JQuery e JQuery UI 

<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>

Inicializar a API 

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

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

Recomendados para você