|Page 1 of 1||[ 5 posts ]|
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.
When listening to the events, the payload contains a drag and a drop property. The drag property (DD instance) has properties that you can access in real time (startXY, nodeXY, etc).
At that point you have the XY coords of both the target and the drag, you can do some simple math to get the difference (relative position)
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.
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.
Actually, I think you're making it too complicated. If both of your coords are page based, then it's simple math. Just take the page coord of the new item, subtract the page coord of the #page item and you have relative position.
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).
|Page 1 of 1||[ 5 posts ]|
|You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum