drag and drop

[moshlp]

hi:
i´m building a page for kids and I want to make a drag and drop game. It´s the solar system and the kids have to put the corresponding names to the planets. I know how to drag and drop the names but I have to make the game that if the name of the planet is right it has to stay where the user drops it, but if the name is wrong the name should go back to the list of names.
the solar system is a picture, i guess i should make it a map, but through Javascript it should validate the position where the name is dropped.
How can I do this??, help please!!!!

[Vladdy]

The task you are undertaking requires a solid knowledge of javascript, algorithms and DOM browser specifics. Here is an example of movable objects to give a start:
www.vladdy.net/WCA/wintest.html

[moshlp]

ok....but the only thing I can´t do is to validate the position of the word when it´s dropped and then check if the area where it was dropped is the right one.
is that too difficult to do?

[Vladdy]

Do you have a link to a page that implements the rest of the functionality, so we can see the code you are using now and how the overlapping check can be added to it?

[moshlp]

here
http://mosh.web1000.com/sistema_solar.htm

[Vladdy]

Seems like you started in a wrong direction there.
1. Your script "works" only in IE
2. Your HTML makes scripting anywhere from hard to next-to-impossible.

Advice:
1. Learn the current state of HTML and CSS
2. This is one of the cases where the name of the planet is better represented by an image, so that you do not have to deal with different font size settings and so on.
3. Easiest way to accomplish the task is to use absolute positioning for all your images so that coordinates on the canvas are known to you
4. Define positions of name "drop zones" centers
5. When a name is released find the position of it's center and compare it to the position of expected drop zone, allow for error - if within certain radius accept