(Arrastar e Soltar) Drag & Drop com Jquery!

Olá a todos, bem, tô passando por aqui atendendo um pedido de meu amigo Nairon(Micox) para mostrar como se usar esta funcionalidade de arrastar objetos dentro de uma página.

Então prossigamos,

Quando pensamos em arrastas não podemos nos resumir apenas no ato de arrastar, temos que pensar que um objeto pode ser arrastado apenas em uma determinada área, ou apenas em um certo ponto de sua área o usuário poderá arrastar, ou apenas na horizontal ou vertical ou até mesmo mover-se de tantos em tantos pixels na tela.

Bem, creio que você deva ta pesando ” Poxa, isso dará trabalho”…

E eu te respondo, sim, “daria”, se desejássemos “re-inventar a roda”, porque? Por que a Jquery usa plugins, logo, existe um vasto repositório deles na comunidade a fora e já alguns feitos por brazucas em nossa comunidade JqueryBrasil.com.

Logo, irei apresentar o plugin IDRAG que faz parte da biblioteca de efeitos Interface .

E como usar?

É bem simples…

Basta apenas que você tenha a jquery já instalada e após isso baixar dois plugins para conseguirmos estes efeitos.

O Iutil ( sugestivo o nome não?) - Ele serve basicamente para funções rápidas como retornar tamanho da página, do scroll e afins.

E o Idrag que fará os efeitos.

Ou então, você pode pegar o plugin já compactado aqui ó: http://interface.eyecon.ro/download e lá você escolhe o plugin chamado Draggables e clica em download your selection

Eu sugiro esta ultima opção, pois o código dos dois plugins já vem juntos e compactados.

E como usar Vítor???

Risos.. Vamos nessa….

Temos um div que será nosso objeto a mover:

<div id=”drag1″ class=”draggable”><a href=”index.php”>Drag me</a></div>

Ele possui esta classe css : draggable, que pode ter qualquer nome, contanto que tenha position: absolute;

Logo, para todo objeto que desejar mover, aplique esta classe ok?

Depois de termos nosso bloco com id (drag1) e já com a posição absoluta, agora vamos fazer a chamada do plugin.

Teremos nossa boa e velha chamada do:

$(document).ready(function(){

$(’#drag1′).Draggable({snapDistance: 10, frameClass: ‘frameClass’});
});

E pronto, nosso objeto está sendo arrastável agora. Você deve ta dizendo ” Você falando sério Vítor??” , sim, estou.

Então pode explicar melhor? Claro, posso sim…

Esta chamada é bem básica, ela apenas referencia o objeto com o id do bloco, chama o plugin Draggable e aplica sua propriedades:

snapDistance : Que fara com que o drag só inicie se realmente o mouse arrastar o objeto por mais de 10 pixels, e para que isto? Para evitar drags acidentais ( Inteligente não?)

frameClass: é a classe que será aplicada ao objeto no momento da seleção. Se não desejar mudança alguma, nem precisa deste parâmetro.

Bem, basicamente é isto.

Porém, você ainda tem uma infinidade de parâmetros para configurar outros efeitos no arrastar.

ghosting: true : Ao invés de arrastar o objeto, é criado uma cópia dele e você acaba arrastando a cópia, quando soltar o objeto original segue até o ponto que você soltou ( Bem interessante ).

opacity: 0.5: Precisa explicar? Aplica uma opactidade na cópia do objeto.

fx: 300: Tempo que o objeto original terá para chegar até o ponto que sua cópia foi solta.

revert: true: Você arrasta o objeto e ele retorna para o ponto inicial ( Qual a funcionalidade disto???)

grid: [50,50]: Mover em grade, este realmente é interessante, faz com que o objeto mova-se de tantos em tantos pixels no eixo (x e y), muito legal mesmo. (Imaginando as possibilidade né?) risos..

axis: ‘vertically’ ou ‘horizontally’ : Moverá o objeto ou apenas na vertical ou na horizontal ( este é do ca…..)

zIndex: Precisa explicar?

cursorAt: { top: -5, left: -5 }: Faz com que o bloco siga o ponteiro do mouse em determinada coordenada.

containment: ‘parent’: Setei ‘parent’ , para dizer que meu bloco, só póderá mover-se dentro do bloco que ele está contido.

Você pode também usar um array com (esquerda , topo, largura e altura) por onde o bloco poderá ser arrastado.

Exemplo:

Nosso bloco:

<div id=”parentElem”><div id=”insideParent”>Drag me inside my parrent</div></div>

Nossa chamada:
$(document).ready(function(){
$(’#insideParent’).Draggable(
{
zIndex: 1000,
ghosting: false,
opacity: 0.7,
containment : ‘parent’
}
);
});

handle: ‘alvo’: Hân? Hein? Calma, eu explico, esta parâmetro server para você usar um determinado objeto dentro do bloco que deseja arrastar para ser seu ponto de arrasto. Sim, como se fosse só naquele ponto onde se pode arrastar o objeto ( eu sei que você sabe do qu estou falando. Lá vai um exemplo:

Nosso bloco:
<div id=”drag7″ class=”draggable”><div></div>Arraste-me</div>

Nossa chamada:
$(document).ready(function(){

$(’#drag7′).Draggable(
{
handle: ‘div’
}
);
});

Creio que no lugar do alvo (div) , você possa usar outros seletores da Jquery como ( $(’#ids’) ), testa aê…

Bem, é isto…

Qualquer dúvida, sugestões, fofocas, broncas, bugs, desabafos, conselhos amorosos e tudo quanto achem que devo saber, manda um comentário tá ok??

Valeu gente e até a próxima…

[JABA] Não esqueça de entrar na comunidade jquerybrasil.com [/JABA]