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
