CODEWITHSUNDEEP
javascriptjqueryjquery-events
Liam
Liam

Reputation: 9855

JavaScript Click and Drag function

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!

Upvotes: 2

Views: 2423

Answers (2)

Ratata Tata
Ratata Tata

Reputation: 2879

I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?

Let me explain:

1- Add a listener to mouse down, up and move to that little map;

2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);

3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.

I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.

Upvotes: 0

Flo
Flo

Reputation: 1671

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

Upvotes: 1

Related Questions