Funcionalidade de arrastar com jQueryUI

Na operação de arrastar e soltar participam dois elementos: o primeiro é o elemento que você arrasta e o segundo é o elemento onde você solta o primeiro. Por isso, as bibliotecas jQueryUI mantêm duas classes diferentes para realizar um exercício completo de arrastar e soltar. Por um lado temos o plugin draggable, que se aplica sobre os elementos que você quer que se arrastem, e por outro o plugin droppable, que se aplica sobre aqueles elementos que você quer que saibam quando você solta algo encima deles.

Usando o plugin droppable

Talvez nos tenha surpreendido o simples que era conseguir que um elemento pudesse ser arrastado com jQueryUI, assim que agora não nos surpreenderá tanto a facilidade de detectar que se tenha soltado em um lugar determinado. Para isso usamos este simples código.

$(“#soltavel”).droppable();

Com isto conseguimos que o elemento com id=”soltavel” detecte quando algum elemento draggable seja solto encima dele. Claro que para fazer algo quando arrastemos um elemento até ele, não nos servirá invocar o plugin droppable, senão que teremos que realizar alguma outra ação e para isso entram em jogo os eventos.

Se quisermos fazer algo quando se solte um elemento encima de um droppable, teremos que definir o evento “drop”, desta maneira.

$(“#soltavel”).droppable({
drop: function( evento, ui ) {
$(this).html(“Voce o soltou!!!”);
}
});

Esse evento “drop” faria com que, ao soltar um elemento arrastando-o encima do dropable, se mude o texto que está escrito no elemento droppable.

Opções de personalização de um elemento droppable

Existem diversas opções de configuração dos elementos droppable que se podem atribuir, tanto no momento de invocar o plugin, como depois de ter sido criado o droppable por meio do método “option” do plugin.

Ao invocar o plugin indicamos as opções de configuração tal como estamos acostumados a fazer em jQuery, com notação de objeto e por meio de uma série de propriedades. Por exemplo, podemos configurar a tolerância com que um elemento aceita um elemento soltado com a propriedade de configuração “tolerance”.

$(“#soltavel”).droppable({
tolerance: “fit”
});

Com isto conseguimos que o elemento que soltamos, só se considere solto no objetivo quando está completamente dentro do mesmo.

Interessante é também a opção “accept” ou “scope” (ambas servem para o mesmo). Com elas indicamos a classe de elementos que um droppable aceitaria receber, por meio de um seletor. Se tem que configurar como valor a alguma dessas duas propriedades, ou às duas, o seletor ou seletores que se aceitariam.

$(“#soltavel”).droppable({
accept: “.tarefa”
});

Esse elemento só aceitaria que fossem soltos os elementos com a class “tarefa”. Para sermos mais exatos, só esses elementos de classe “tarefa” provocariam que se lançasse o evento drop.

Na própria documentação de jQueryUI vocês encontrarão outra série de opções interessantes.

Eventos nos elementos droppable

Podemos definir vários eventos distintos relacionados com os elementos droppable. São os seguintes:

• Evento create: ocorre quando é criado o elemento droppable.
• Evento activate: se produz quando um elemento draggable que se poderia aceitar pelo droppable começa a ser arrastado.
• Evento deactivate: ocorre quando um elemento draggable que poderia ser aceito se deixa de arrastar.
• Evento over: ocorre quando um elemento draggable que fosse aceitável entra em uma área de tolerância onde se poderia soltar sobre o droppable.
• Evento out: o mesmo que over mas quando sai da tolerância.
• Evento drop: quando se solta um elemento draggable sobre um droppable, desde que o draggable seja aceito pelo droppable e seja solto dentro da área definida pela tolerância.

Assim se definiria um evento no momento de criação do droppable.

$(“#soltavel”).droppable({
out: function( evento, ui ) {
$(this).html(“Agora saiu…”);
}
});

Esse evento faria com que se mudasse o texto do droppable por “Agora saiu”, quando um elemento draggable, que seja aceitável, saia da área de tolerância.

Também podemos definir eventos uma vez que se tenha criado o droppable com o método bind() de jQuery.

$( “#soltavel” ).bind( “drop”, function(evento, ui) {
//código del evento
});

Como pode imaginar o leitor, o evento chave à hora de gerenciar a utilidade de arrastar e soltar é “drop”. Por exemplo, aqui temos um script para a definição de um evento “drop” que faz com que, ao soltar um elemento no droppable, o elemento soltado mude sua cor de fundo.

drop: function( event, ui ) {
ui.draggable.css(“background-color”, “#ddd”);
}

Se quisermos fazer alguma coisa quando o elemento se retira da área onde se poderia soltar, temos que utilizar o evento “out”. Porém, cuidado, que esse evento “out” se executa sempre que se sai da área soltável, independentemente se antes o havíamos soltado ali ou não. Mais,tarde faremos um exemplo para ver este assunto.

Métodos dos elementos “soltável”

Para acabar esta introdução sobre os componentes droppable de jQueryUI nos falta comentar que existe uma serie de métodos que podem ser invocados sobre eles, para fazer coisas diversas, como habilitá-los ou inabilitá-los, mudar suas opções de configuração, etc.

Todos esses métodos se invocam como se estivéssemos invocando o próprio plugin droppable, mas passando como parâmetro uma cadeia com o nome do método a ser executado, tal como estamos acostumados a fazer com diversos outros componentes jQueryUI, incluído o plugin draggable.

Por exemplo, temos o método “disable” que serve para inabilitar um elemento droppable e se executaria da seguinte maneira:

$(“#elementodroppable”).droppable(“disable”)

Outro exemplo interessante é o método option, que serve para definir opções de configuração do elemento. O colocamos em execução ao passar a palavra “option” e a seguir temos que indicar outro parâmetro com o nome da opção à que queremos acessar, junto com um terceiro parâmetro com o novo valor da opção, se é que desejávamos mudá-lo.

$(“#soltavel”).droppable(“option”, “activeClass”, “solteaqui”);

Com isso conseguiríamos que, ao iniciar o ato de arrastar sobre um elemento que possa se soltar no elemento “#soltavel”, se aplique a classe “solteaqui”. Essa classe CSS se coloca no elemento onde se pode soltar aquilo que se está arrastando, para que o usuário perceba onde poderia culminar sua ação de drag&drop.

Se quiséssemos em algum momento saber que classe se definiu como “activeClass”, poderíamos fazê-lo com:

$(“#soltavel”).droppable(“option”, “activeClass”)

Conclusão

Até o momento fizemos uma introdução bastante completa sobre os componentes Droppable de jQueryUI, mas o certo é que as opções de uso e configuração dos elementos “soltavel” são bastante grandes. De qualquer modo, lembre sempre que você dispõe de muito mais informação na própria documentação de jQuery UI.

Com o visto até agora você já deve ter uma ideia mais ou menos clara sobre como fazer sistemas de arrastar e soltar medianamente complexos. No entanto, no capítulo seguinte faremos um novo exemplo um pouco mais elaborado que seguramente servirá para esclarecer algumas dúvidas que você ainda possa ter.

Fonte: http://www.criarweb.com/artigos/arrastar-jqueryui.html