O jQuery por si só não inclui funcionalidades de Drag & Drop. Para isso, utiliza-se o jQuery UI, uma biblioteca complementar que adiciona componentes visuais e interações avançadas.
Para trabalhar com Drag & Drop, é necessário incluir duas bibliotecas:
jQuery
jQuery UI
Inclusão do jQuery UI
No ficheiro HTML, adiciona os seguintes links após o jQuery:
Tornar um elemento arrastável (draggable())
O método draggable() permite que um elemento seja arrastado com o rato.
HTML:
CSS:
jQuery:
A partir deste momento, o elemento pode ser arrastado livremente pelo ecrã.
Criar uma zona de destino (droppable())
O método droppable() permite definir uma área onde um objeto pode ser largado.
HTML:
CSS:
jQuery:
Quando um elemento arrastável é largado na zona de destino, ocorre o evento drop.
Combinar draggable() e droppable()
Exemplo completo:
HTML:
jQuery:
O evento drop
O evento drop é fundamental para a lógica do jogo.
É aqui que se valida se a ação do utilizador foi correta.
O objeto ui.draggable refere-se ao elemento que foi arrastado.
Exercício 1 — Primeiro Drag & Drop
Cria uma página com:
Um elemento arrastável
Uma zona de destino
Quando o elemento for largado:
O texto da zona deve mudar
O elemento arrastado deve desaparecer
Exercício 2 — Vários objetos
Cria:
Dois elementos arrastáveis
Uma zona de destino
Faz com que:
Qualquer um dos elementos possa ser largado na zona
A zona mostre uma mensagem de sucesso
