How to get current position of an image in jQuery?

Question

Hi, I've been developing a image manipulation script which has a background and user can upload one or more images onto that background. I want users to be able to drag and move around the BG and finally they can generate final image. However, I have no idea how to get the position of draggable image position on BG. I've been searching around the Internet and ebooks but no clue. Please show me some way and I'll be waiting for your precious replies.

Answer 1

Take a look at position():

var pos = $("#myimage").position(); // returns an object with the attribute top and left
pos.top;  // top offset position
pos.left; // left offset position

Answer 2

You've said two things:

1. you want to keep the image in the background
2. you want to be able to adjust its position in the parent element.

So you should set the image as the "background-image" of the parent div, with "background-repeat:no-repeat".

The position of the image can be controlled by the "background-position" property.

Of course, there can be alternate implementations using an in the parent div, and using clever interplay of "position:absolute" and "position:relative", but I've seen that repositioning of images is smoother if the image is a background, rather that the image be present as an .

Hope that helps.

cheers, jrh