Forums

How do I get the coordinates of a drag node relative to a drop target (vs. relative to page)?
I'd like to get the coordinates while dragging and after dropped. I am dragging/dropping a proxy.

Hi Dav,

Thanks for the reply. So, the reason I posted (I probably should have given more shape to my context in the original post) is because I wanted to avoid fragile calculations.

Actually, I'm OK with a calculation; however, what I am concerned about is getting a useable set of coordinates.

Here is the quick view of the scenario. I've got a toolbar of different HTML element icons that can be dragged off onto a "#page" element. Once the icon is dropped, I want to get rid of the icon and replace it with the "real" HTML element. So if I drag the "box" icon, I want to create a "<div>" in it's place. So as you can see, a simple dropTarget.appendChild() isn't enough as I need to query the dragNode for it's coordinates and use those to create a new element with "position: absolute". getXY gives me the coordinates per the document, but I want them based on the position of "#page".

Perhaps I've missed an equivalent to jQuery's "offset". This solves the problem without me having to factor in a bunch of other elements outside of "#page": https://github.com/jquery/jquery/blob/m ... /offset.js

SIDE NOTE: I've noticed that "getBoundingClientRect" is well supported (odd I've never used this before) so perhaps this is all I need without needing offset.js.

http://ejohn.org/blog/getboundingclientrect-is-awesome/

So, the tl;dr:

I'm going to play with getBoundingClientRect and if that turns out to be reliable 100% of the time (I only need to target HTML5/CSS3 capable browsers), I'm good.

Thanks for listening Dav.

Dav,

I can see how it may have looked like I was simply over-complicating things; however, it turns out that I had gotten myself into a "Red herring" situation.

Somehow, I was convinced that getXY() on #page wasn't working correctly. In fact, it wasn't, but that was only because I did not have #page => position: absolute. I had since added this; however, I was at that point working under the assumption that I could not use getXY() reliably. Thus, my "Red Herring".

So, I dug into the code:
https://github.com/yui/yui3/blob/master ... en.js#L109

The hint to me was the usage of node.offsetLeft and node.offsetTop. This told me that I likely had a "position" problem (because I had no offsetParent or the offsetParent was incorrect).

Sure enough, "position: absolute" gives me what I need. Without knowing this quirk, I wonder how long one might spin their wheels

With all of this out of the way, your initial statement is now true (i.e. the rest is indeed simple Math).