Question

I’m trying to build an interactive map and I’m looking for information on how to have a click and drag in one window, affect an image in its parent window.

As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?

Any information/help is greatly appreciated!

Answer 1

jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.

The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html

The first one in the box has the boundaries of the box.

And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html