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
