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
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


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