Peter,

Is PointUtils.localToGlobal() not working for you? From what I understand it 
takes approach (1).

From: Peter Ent<mailto:p...@adobe.com.INVALID>
Sent: Tuesday, August 29, 2017 11:29 PM
To: dev@flex.apache.org<mailto:dev@flex.apache.org>
Subject: [FlexJS] Finding (x,y) position

Hi,

While working on drag-and-drop, I've made an "interesting" discovery having to 
do with the HTML-side's x and y getter functions.

Let's say you have a nesting of <div>s:

<div style="position:relative" id="outer">
   <div id="header" style="height:30px">…</div>
    <div id="wrapper">
        <div id="inner">
             <div class="ItemRenderer" id="first">…</div>
        </div>
    </div>
</div>

(this structure is similar to what is generated for DataGrid).

If you attempt to get the y location of "first" itemRenderer, you will get 30 
back as the answer. That happens because the y getter first looks to see if the 
object has a "top" style value and, finding none, returns its offsetTop. In 
this case, offsetTop is 30 and offsetParent is "outer". If you get the y value 
of "inner" you will also get 30 as the answer for the same reason.

If each of the <div>s had position:relative (or absolute), then offsetTop would 
be as you would expect with each offsetParent being the <div> above it.

Our layout functions (and x and y setters) do not normally set the position 
style on element. I removed this a good while ago. Now I am trying to place a 
drop target indicator and to do that I need accurate (x,y) locations.

I have a couple of solutions:


  1.  For any element, look at its getBoundingClientRect and compare with its 
elementParent.getBoundingClientRect. The difference between then gives the 
child's position relative to the parent. This seems reliable.
  2.  Attempt to divine a child's position using the offset information. I 
can't make this work.
  3.  Modify the layouts to check the contentView's value of position and if 
not set already, set it to "relative". This makes the x and y getters return 
the right thing but may have unintended consequences.

Any advice from seasoned JavaScript developers is greatly appreciated!

Thanks,
Peter

Reply via email to