jquery com PHP - Ordenar campos e salvar no MySQL - Re-Order MySQL and Jquery + PHP - Site and mobile


ATUALIZADO em -- UPDATED in: 24.06.2020

<script
              src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
              integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
              crossorigin="anonymous"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script> <!-- To work in Mobiles -->
              <style>
  #ordenacao ul { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #ordenacao li { width:250px; border:solid 3px black; background-color:#ccc; padding: 12px 20px;margin-top:10px;border-radius: 4px; box-sizing: border-box; cursor: move; }
  /*#ordenacao li span { position: absolute; margin-left: -1.3em; }*/
  </style>
            
 <?php
// make your db connection up here ...
include_once "SUA_CONEXAO.php";
// handle POST
if ($_POST) {
// use $i to increment the order
$i=1;
// loop through post array in the order it was submitted
foreach ($_POST['item'] as $item_id) {
// update the row
$result = $pdo->prepare("UPDATE SUA-TABELA SET ordem=".$i." WHERE id=".($item_id));
$result->execute();
// increment order to make the next item "heavier"
$i++;
}
echo "ok";
exit;
}
?>

<script type="text/javascript">
// when the entire document has loaded, run the code inside this function
$(document).ready(function(){
$('#ordenacao').sortable();
});
</script>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']?>">
<ul id="ordenacao">
<?php // query fruit table and print out each item
$result = $pdo->prepare("SELECT id, data, ordem FROM SUA-TABELA ORDER BY ordem");
$result->execute();
// print the list items
while ($row = $result->fetch()) {
echo '<li>
<input type="hidden" name="item[]" value="'.$row['id'].'" />
'.$row['data'].'</li>';
}
?>
</ul>
<p></p>
             <div  style='float:left;width:100%;text-align:center;display:block;clear: both;'>
                 <button type='submit' class='btn2'>ORDERNAR</button>
              </div>
</form>

===================================

Jquey Touch link and how to is here:
https://github.com/furf/jquery-ui-touch-punch

Comentários

Postagens mais visitadas