Search code examples
imagehtmlcoordinatesdragresizable

Div position inside img

Here is what exactly I am trying to do.

I have an image with square elements inside it. When i click on top left and bottom right corners of those elements they are surrounded with divs with border. I then have functions to drag and resize those divs(once they are created by two clicks). I want to be able to record the resized coordinates of those divs in text boxes. For example if the image is with height=700 and width=500. Then if i create a square div inside it with coordinates top left(x=190,y=150) and bottom right(x=290,y=250). Then if i drag this div around the image i want those coordinates to change accordingly. Same thing to happen if i resize it.

Thanks a lot in advance.

Solution 
  • var TopLeftX = $('.kiro'+CountClicks/2).offset().left - $('img').offset().left;
var TopLeftY = $('.kiro'+CountClicks/2).offset().top - $('img').offset().top;
var BottomRightX = TopLeftX + $('.kiro'+CountClicks/2).width();
var BottomRightY = TopLeftY + $('.kiro'+CountClicks/2).height();