[Dúvida] Arrastar objecto

[joaorosa]

boas...

eu estou a fazer um pequeno jogo em javascript, e o utilizador tem de conseguir arrastar uma pequena peça (quadrícula com uma imagem), para uma tabela maior...

como é que posso fazer isso???

cps

[jreis]

O ideal para isso é usar uma das muitas bibliotecas de javascript existentes, tens por exemplo a Prototype+Script-aculo-us, que funcionam bastante bem, mas que na minha opinião são um bocado pesadas (cerca de 100KB de javascript!), outra que encontrei recentemente e que me parece também bastante boa, se bem que inicialmente talvez um bocadinho mais complicada de usar é a jQuery, usada conjuntamente com o plugin Interfaces (não me lembro do URL, procura no Google que se encontra bem, ou até no próprio site do jQuery), quer permite esse tipo de coisas e muito mais. É bastante mais leve que a Prototype+Script-aculo-us.

Já agora deixo um conselho a todos os que precisam de usar javascript para tudo o que seja mais complexo do que abrir janelas de pop-up e mostrar "alerts", o uso de uma biblioteca desse género facilita e acelera enormamente o desenvolvimento.

[joaorosa]

muito obrigado pelas dicas....

cps

[joaorosa]

não consigo encontrar o k quero nestas bibliotecas....

:S

[jreis]

Experimenta esta página, é a do plugin Interface mencionado no post anterior. Vê as demos "draggables" e "droppables" para um exemplo das capacidades (muito boas!) deste plugin para o jQuery.

Quanto a implementação, (ainda) não experimentei, mas penso que a documentação/exemplos devem dar uma boa ajuda.

Se isto não servir para o que queres, dá mais detalhes para ver se podemos ajudar de outra forma...

[joaorosa]

é mesmo isto... vou ver na implementação....

é que os elementos tem de ser para dentro de uma tabela...

muito obrigado...

cps

[joaorosa]

bem já tenho o div que dá para arrastar... agora o drama está em por o obejcto dentro de uma matriz de 10*10... tipo que o objecto fique "preso" lá dentro depois de arrastado....

cps

[jreis]

Tal como disse ainda nunca trabalhei com isso, mas do que vi (muito rapidamente) nas docs, tens a propriedade "containment", que pode levar o valor "parent", e que permite precisamente que o elemento a arrastar fique dentro do elemento "pai". Agora isto tudo depende de como tas a estruturar o HTML... Se estás a usar uma <table> é capaz de ser complicado, talvez o ideal fosse uma série de divs??

tipo isto:

<div id="cont_matriz">
<div id="cell1"></div>
<div id="cell2"></div>
...
<div id="cell10"></div>
<div id="draggable></div>
</div>

Isto tudo com o CSS correcto para parecer uma tabela. Assim terias controlo de cada célula com relativa facilidade, e já conseguirias usar a propriedade "containment" do draggable sem grandes problemas, penso eu.

[joaorosa]

parece-me bem....

e se criar uma tabela com divs lá dentro???

deve ser a mesma coisa....

tenho de me debruçar a sério sobre isto!!!

mas muito obrigado pela ajuda!!!!

cps

[djthyrax]

não, uma div com uma tabela lá dentro 😛