flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Peter Ent <p...@adobe.com.INVALID>
Subject [FlexJS] Finding (x,y) position
Date Tue, 29 Aug 2017 20:28:41 GMT

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>

(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

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
  2.  Attempt to divine a child's position using the offset information. I can't make this
  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

Any advice from seasoned JavaScript developers is greatly appreciated!


  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message