1

I have jquery draggable/droppable working with the containment and helper options set. What I'd like to do is to store the top and left parameters of the dropped item in two variables.

I have achieved this in the following example (drag the new document icon into the box) however the position reported back is the position relative to the original icon instead of the parent DIV. Both the icon and the droppable box are absolute positioned.

http://www.instructuk.com/drop.php

Does anyone know how to get the position relevant to the parent instead of the icon?

Kara
  • 6,115
  • 16
  • 50
  • 57
Rob
  • 1,089
  • 3
  • 11
  • 19

2 Answers2

10

You'll have to do the calculation yourself:

var
  draggableDocumentOffset = ui.helper.offset(),
  droppableDocumentOffset = $(this).offset(),
  left = draggableDocumentOffset.left - droppableDocumentOffset.left,
  top = draggableDocumentOffset.top - droppableDocumentOffset.top;

alert('Item was dropped at - Left: ' + left + ', Top: ' + top);
brianpeiris
  • 10,735
  • 1
  • 31
  • 44
  • @brianpeiris, may I ask you to take a look at a jQuery drag and drop related question here : https://stackoverflow.com/questions/54498364/jquery-drag-and-drop-simulation-does-not-work-for-the-last-draggable ? – Istiaque Ahmed Feb 03 '19 at 13:00
0

It is maybe not the most beautiful solution but you can get the position of the drop in the document by:

x=event.pageX;
y=event.pageY;

And then use the coordinates of the droppble area to substract from x and y.

dx=$("#droparea").offset().left;    
dy=$("#droparea").offset().top;    
var left=x-dx;          
var top=y-dy;

K

kwicher
  • 2,092
  • 1
  • 19
  • 28