Arrastar e soltar com jQuery UI

Antes de ir com alguns exemplos práticos, vamos dar uma olhada nos métodos de arrastar e soltar que o jQuery UI tem para nós.
1- Método arrastável ()
O método arrastável gerencia os elementos de uma página HTML que você deseja mover; esse método pode ser usado de duas maneiras diferentes:

 • $ (seletor, contexto) .draggable (opções) • $ (seletor, contexto) .draggable ("ação", params) 

Vejamos um exemplo:
Primeiro devemos incluir os arquivos necessários, um erro comum que é feito é incluir o jQuery UI .js antes do jQuery .js, lembre-se que jQuery é o núcleo e jQuery UI são apenas bibliotecas, plug-ins, widgets, que sem jQuery não podia funcionar.

Invocamos o método:

 $ (function () {$ ("#draggable") .draggable ();}); 

E nós o associamos ao seletor que será o div com ele.

Me arraste

Aqui está o código-fonte completo:

 jQuery UI Draggable - funcionalidade padrão
Me arraste

2- método droppable ()
O método droppable gerencia os elementos de uma página HTML que você deseja soltar em uma área. Como o método arrastável, ele pode ser usado de duas maneiras diferentes:

 • $ (seletor, contexto) .droppable (opções) • $ (seletor, contexto) .droppable ("ação", parâmetros) 

Vejamos um exemplo disso:
Incluímos os arquivos, adicionamos os estilos, invocamos os métodos (aqui usaremos o método arrastável igualmente) seguido pelo método soltável. Aqui está o código-fonte:

 jQuery UI Droppable - Funcionalidade padrão
Arraste-me para o meu alvo
Solta aqui

E esta seria a nossa saída no navegador:

E se colocarmos os dois conceitos juntos em um exemplo mais complicado, algo como um carrinho de compras? Vamos ver:
Primeiro, incluímos nossos arquivos:

Adicionamos alguns estilos ao nosso carrinho:

Também usaremos o método Accordion () da biblioteca jQuery UI para tornar nosso carrinho mais atraente, invocamos nossos métodos e os associamos aos seletores, neste caso iremos estender toda a funcionalidade do método arrastável para uma lista:

E é assim que nosso carrinho de compras seria:

Para que você possa testá-lo, aqui está o código-fonte completo:

 jQuery UI Droppable - Demonstração do carrinho de compras
Camisetas

Camisa Lolcat
Camisa Cheezeburger
Camisa Buckit


Bolsas

Zebra listrada
Couro preto
Couro de Jacaré


Gadgets

Iphone
iPod
iPad


Adicione seus itens aqui

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo