Have Geek Brain

Dragging objects onto DIV .. relative versus absolute position and size of the target DIV

I have a drag and drop question and hope one of you has already solved this. I have an online application where I can drag annotations (arrows, stars) over an image placed on a DIV.

Here are some things to know. 1) The image can be any size (sometimes large sometimes small) 2) The wrapper DIV can be left aligned or centered 3) The wrapper DIV can be fixed or automatic

So, is there a possible solution to make it so that the annotation positions always refer to the top left corner of the image? So,

I am using jQuery. How can I get the position of the annotation always relative to the top left corner of the image when I drop the object?

Thanks!

+2


a source to share


1 answer


Try something like this. It gives offsets for the dragged item and the dropped item. And with a little math you can get the position of the dragged item relative to the top left corner of the item being dropped.



$('#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);
   }
});
+6


a source






More articles:


All Articles