Ordenação com JQuery Sortable
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/
Fabio Paiva
Fala Alex. Massa esse tutorial. O meu funciona tudo perfeitamente, porém, não atualiza no banco. Já fiz a revisão de tudo e não sei o que está acontecendo.
Jean Prado
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!
Luciano
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.