JavaScript Web Application with Drag and Drop - Easy to do?

[David Smithz]

Hi there,

I have been asked how easy it would be to develop a web application where by
I have a number of images on the left of the screen that could be dragged
and dropped onto a map on the centre of the screen and the position of where
the dragged item was dropped stored.

For example, imagine a game type puzzle which has a picture (cartoonish) of
a map of the world.
On the left hand side there are a number of flags - say 10. The user can
drag all the flags and place them on the screen. They are also able to
change their minds while doing this. Therefore as they move the flags
around, there is not actually interaction with the server - client side
only. When the user lifts the left mouse button the flag is dropped at its
current position.
Eventually the user presses the submit button when they are happy they have
matched the flags to the country positions and the data (where the flags are
position etc.) is sent to the server for processing.

Does that make more sense?

Does anyone have any examples of similar functionality that they have
developed?
Is this the sort of thing that (assuming a bit of JavaScript experience) one
could produce a demo of in say a day?

Thanks for any input on this matter.

Kind regards

Dave.

 

[RobG]

Hi there,

I have been asked how easy it would be to develop a web application where by
I have a number of images on the left of the screen that could be dragged
and dropped onto a map on the centre of the screen and the position of where
the dragged item was dropped stored.
[...]

Does anyone have any examples of similar functionality that they have
developed?
Is this the sort of thing that (assuming a bit of JavaScript experience) one
could produce a demo of in say a day?

I imagine you could knock up a demo using the library at the link below
pretty quickly, but eventually you'd probaly want to write your own
stuff that suited your circumstance better.

<URL:http://www.walterzorn.com/dragdrop/dragdrop_e.htm>