Drag e Drop com Scriptaculous

Drag e drop é um dos efeitos mais requisitados em Ajax. Com drag e drop (arrasta e des larga) pode ser usado para diferentes coisas, tais como um carrinho de compras mais avançado do que os tradicionais para sites de comercio electrónico, uma maneira para o usuário do teu site poder organizar a informação/layout do teu site como desejar, criar jogos apenas usando Javascript e Ajax.

Enfim existe diversas maneiras de dar uso ao efeito drag e drop.

Neste exemplo/tutorial vamos usar o famoso prototype e o scriptaculous para alcançar o efeito de uma maneira simples e eficaz.

Começar com o prototype e scriptaculous

O primeiro passo consiste em fazeres o download do prototype e o scriptaculous, de seguida copiares para uma directoria onde a tua aplicação/website esta alocada.

Para começar a usar de imediato basta pores entre as tags head a referencia aos ficheiros do prototype e o scriptaculous.

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js'></script>
</head>
<body>
</body>
<html>

Drag e drop o mais simples possível.

Vamos começar por criar uma caixa que tem um titulo e um pouco de texto onde vamos querer o efeito drag (arrastar) quando o usuário clica e não des larga a caixa.

<div id='dragsimples' class='bloco' onclick='efeitoDragSimples()'>
<h4>Drag simples</h4>
<p>Isto move-se de um lado para o outro.</p>
</div>

Reparar que temos um onClick='efeitoDragSimples()', basicamente serve para quando o usuário clica na caixa chamar a nossa função em Javascript para lidar com o efeito.

Para tal temos que ter a função em Javascript entre as tags head.

<div id='dragsimples' class='bloco' onclick='efeitoDragSimples()'>

function efeitoDragSimples(){
new Draggable('dragsimples',{});
}

Uma linha? Só uma linha? Sim, simples não é?

Com prototype e scriptaculous basta apenas uma linha para poder aplicar o efeito desejado.

Experimenta na caixa em baixo.

Drag simples

Isto move-se de um lado para o outro.

Vamos la explicar melhor esta linha.

De momento para esta caixa as opções encontram-se vazias.

Opções do drag e drop com scriptaculous.

Claro que basta uma linha de código para alcançar o efeito desejado mas scriptaculous oferece nos mais opções.

Vamos analisar as opções.

Revert

Quando começas a arrastar / drag uma caixa e des largas numa nova posição de momento a caixa fica nessa posição, com o revert activado a caixa volta a posição inicial.

Para testarmos vamos criar uma nova caixa e uma nova função em Javascript.

<div id='dragrevert' class='bloco' onclick='efeitoDragRevert()'>
<h4>Drag com revert</h4>
<p>Isto move-se de um lado para o outro, mas volta sempre para a posição inicial.</p>
</div>

Basicamente o código é quase idêntico a caixa anterior apenas mudamos o valor do ID para ser mais fácil de referenciar na nova função que vai lidar com a caixa efeitoDragRevert()

Vamos então criar a nova função.

function efeitoDragRevert(){
new Draggable('dragrevert',{
revert:true
});
}

Ver o efeito em acção:

Drag com revert

Isto move-se de um lado para o outro, mas volta sempre para a posição inicial.

ZIndex

Z-index faz parte de CSS basicamente permite ordenar layers de caixas.Uma caixa com um z-index de 1 fica por baixo de uma caixa com um z-index de 2.

Podemos assim controlar a ordem das caixas quando estão uma por cima de outra.

Vamos então repetir o processo, uma nova caixa e uma nova função.

<div id='dragzindex' class='bloco' onclick='efeitoDragZindex()' style='background-color:#999;'>
<h4>Drag Zindex</h4>
<p>Isto fica por cima de todos.</p>
</div>

A função em Javascript.

function efeitoDragZindex(){
new Draggable('dragzindex',{
zindex:'2'
});
}

Resultado.

Drag Zindex

Isto fica por cima de todos.

Constraint

Com a opção Constraint podes limitar o movimento da caixa, e de momento tem duas escolhas vertical e horizontal.

Nova caixa:

<div id='dragconstraint' class='bloco' onclick='efeitoDragConstraint()'>
<h4>Drag Constraint</h4>
<p>Esta caixa so se move na posição horizontal.</p>
</div>

A nova função em Javascript:

function efeitoDragConstraint(){
new Draggable('dragconstraint',{
constraint:'horizontal'
});
}

Drag Constraint

Esta caixa so se move na posição horizontal.

OnStart e OnEnd.

OnStart podes usar para chamar outra função e é activado quando o usuário começa a arrastar a caixa.

OnEnd serve para a mesma coisa, mas so chama outra função quando o usuário para de arrastar a caixa.

Nova caixa:

<div id='dragonstart' class='bloco' onclick='efeitoDragOnStart()'>
<h4>Drag OnStart e OnEnd</h4>
<p>Esta caixa quando arrastas mostra uma mensagem noutro sitio, quando paras de arrastar a mensagem desaparece.</p>
</div>

A nova função em Javascript:

function efeitoDragOnStart(){
new Draggable('dragonstart',{
onStart:MostraMensagem,
onEnd:EscondeMensagem
});
}

Como podemos ver onStart chama uma nova função MostraMensagem e onEnd chama EscondeMensagem, por isso vamos adicionar duas novas funções.

function MostraMensagem(){
$('MostraMensagem').style.display = 'block'
}

function EscondeMensagem(){
$('MostraMensagem').style.display = 'none'
}

Simplesmente mostra e esconde outra caixa que temos na aplicação.

<p id='MostraMensagem' style='display:none;color:red;border:1px solid #999;padding:10px;'>Mensagem quando comecares a arrastar a caixa!</p>

A funcionar!

Drag OnStart e OnEnd

Esta caixa quando arrastas mostra uma mensagem noutro sitio, quando paras de arrastar a mensagem desaparece.

Conclusão

Sem duvida que scriptaculous e prototype simplificam bastante a maneira que podemos criar o efeito do drag e drop.

Com varias opções da liberdade para criarmos varios tipos de efeito.

E não esquecer podes misturar todas as opções aqui explicadas.

Obrigado, e por favor deixe o seu comentário e votação no blog.