Drag and drop objects onto a DIV.. relative vs absolute position and size of target DIV

Question

Hi, I have a question about drag and drop and hoping one of you already solved it. I have an online web app where I can drag and drop annotations (arrows, stars) on top of an image that sits on a DIV.

Here's some things to know. 1) The image can be any size (sometimes big sometimes small) 2) The DIV of wrapper can be left aligned or centered 3) The DIV of wrapper can be fixed or auto

So is there any possible solution to make it so positions of annotations are always relative to the top left corner of the image? So

I am using jQuery. How would I get an annotation's position always relative to the top left corner of an image once I drop object?

Thanks!

Answer 1

Try something like this. It gives offsets for the draggable element and the droppable element. And with a little math, you can get the position of the draggable element relative to the top left corner of the droppable.

$('#droppable').droppable({
   drop: function(event, ui) {
      var thisOffset = $(this).offset()
      var x = ui.offset.left - thisOffset.left;
      var y = ui.offset.top - thisOffset.top;
      alert(x+','+y);
   }
});