Até agora, qualquer elemento podia ser largado numa zona. Agora vamos tornar o comportamento mais inteligente e controlado.

O jQuery UI permite configurar regras avançadas através das opções:

• revert

• accept

Fazer o elemento voltar à posição inicial (revert)

O método draggable() aceita uma opção chamada revert.

O que significa isto?

• Se o elemento for largado numa zona válida → fica no local

• Se for largado fora de uma zona válida → volta automaticamente à posição inicial

Este comportamento melhora muito a experiência do utilizador.

Controlar que elementos são aceites (accept)

Agora vamos dizer à zona de destino que só aceita determinados elementos.

HTML:

jQuery:

O que está a acontecer aqui?

• A zona só aceita o item correto

• Se o item estiver errado → é automaticamente rejeitado

• O item errado regressa ao ponto inicial

• O item correto fica centrado na zona

Melhorar o feedback visual

Podemos acrescentar efeitos para reforçar a validação.

Evitar múltiplas tentativas na mesma zona

Podemos impedir que uma zona aceite mais do que um elemento:

Assim que recebe a resposta correta, a zona deixa de aceitar novos elementos.

Exemplo completo resumido

Agora temos um comportamento de jogo muito mais realista.

Exercício 1 — Rejeição controlada

Cria um mini-jogo com:

• 3 elementos arrastáveis

• 3 zonas de destino

Regras:

• Apenas o elemento correto pode ser aceite

• Os elementos errados devem voltar automaticamente ao ponto inicial

Exercício 2 — Sistema completo

Adiciona:

• Contador de pontuação

• Desativação da zona após resposta correta

• Feedback visual com cores diferentes