Cor Cinza

Estou começando a me envolver com javascript de uma forma mais profunda agora que peguei pra aprender o jQuery. Antes eu usava o Prototype, que é ótimo, mas eu estava fazendo as coisas de um jeito “errado” [não por culpa do Prototype, claro]. Com o jQuery fica mais fácil de atribuir eventos aos elementos de forma externa, sem usar “event handlers” no código HTML como “onclick” ou “onsubmit”. Isto porque com o jQuery é muito fácil fazer seleções bacanas dos elementos. Pra saber mais sobre seleções, veja a API do jQuery.

Mas eu quero falar aqui sobre ordenação de listas, tanto o lado client-side como o lado server-side. Vou escrever este tutorial em duas partes, porque não achei nada muito bom sobre este assunto com jQuery, mas achei um tutorial muito bacana que usa o Prototype e Scriptaculous, e é em cima dele que eu vou colocar a solução que eu acabei desenvolvendo pra jQuery.

Antes de tudo gostaria de dizer que ainda sou muito noob em Javascript e, possivelmente, exista uma forma mais interessante de fazer isso, por isso, qualquer sugestão ou melhoria do código, é só enviar um comentário aí ok?

Preparando o campo de trabalho

Como eu vou escrever aqui me baseando no tutorial do tutorial do PHPRiot, os primeiros dois passos você pode simplismente copiar de lá:

• Criando e preenchendo o banco de dados
• Mostrando as informações do banco de dados

Começando com o Javascript

Agora você vai precisar baixar o jQuery e também o jQuery User Interface. No jQuery UI você encontra uma série de bibliotecas que permitem a criação de Interfaces mais interessantes para seus usuários, uma delas é o Sortables, que é justamente o que nós queremos. Você pode baixar o jQuery aqui e a biblioteca do UI aqui [No site do UI você tem como personalizar seu download das bibliotecas, então eu recomento uma visitinha por lá].

Agora nós precisamos linkar estes arquivos em nosso documento HTML. Vamos abrir o arquivo index.php e colocar as seguintes linhas dentro da área de nosso código:

<script src="jquery-1.2.2.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.mouse.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.draggable.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.droppable.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.sortable.js" type="text/javascript"></script>

Estes são os arquivos necessários pra fazer o seu sortable funcionar. Agora, antes da lista no arquivo index.php eu sugiro que você coloque algo assim:

<a href="#" id="sortable_switch">Ordenar</a>

Agora vamos ao código Javascript que vai fazer tudo isso funcionar. Coloque isso dentro do código após ter linkado todos os arquivos:

<script type="text/javascript">
function sortList() {
$('#sortable_switch').click(function() {
var list = $('#movies_list');
if ($(this).hasClass('ordering')) {
list.sortableDestroy();
$(this).removeClass('ordering');
$('.destroy').remove();
} else {
list.children('li').prepend('<span class="destroy">ordenando: </span> ');
$(this).addClass('ordering');
list.sortable({});
}

return false;
})
}
$(document).ready(function() {
sortList();
})
</script>

Neste ponto nosso código não nos permite fazer muita coisa além de bagunçar os elementos pela lista como quisermos. Vou tentar explicar um pouco do que eu fiz até agora.

Primeiro criamos uma função, a sortList(), que vai habilitar a ordenação da lista. Nesta função, primeiro eu seleciono o nosso link “Ordenar”. É ele que vai ligar e desligar a ordenação dos elementos. Depois eu encontro a nossa lista e coloco na variável list. Se o meu link não tem a classe ‘ordering‘ eu primeiro acrescento um novo elemento html no início de cada elemento da lista [viu como é fácil manipular seu código com jQuery? prepend adiciona conteúdo no início do nó e append adiciona no final!] pra dizer que você está ordenando a lista agora. Depois eu adiciono a classe ‘ordering‘ ao meu link pro if…else funcionar da maneira esperada, e por último eu habilito a ordenação do código dizendo “list.sortable({})”.

Se eu clico no link “Ordenar” e ele encontra a classe ‘ordering‘ então eu desabilito a ordenação, removo a classe do meu link e removo o elemento que eu adicionei com o prepend anteriormente.

No final disso tudo você tem o código $(document).ready(function() {…}), que executa a nossa função assim que o HTML estiver pronto para ser manipulado. Saiba mais sobre esse pedaço de código aqui!

E isto é tudo por enquanto. Na próxima parte nós vamos colocar um pouquinho de AJAX e elaborar o código PHP que vai ordenar esta lista. Até mais!