Mailing-List: contact dev-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
From: Peter Ent <pent@adobe.com.INVALID>
To: "dev@flex.apache.org" <dev@flex.apache.org>
Subject: [FlexJS] Finding (x,y) position
Thread-Topic: [FlexJS] Finding (x,y) position
Thread-Index: AQHTIQVnJORdNJ67/kavlLRBStwyFw==
Date: Tue, 29 Aug 2017 20:28:41 +0000
Message-ID: <D5CB46B6.2680E%pent@adobe.com>
Accept-Language: en-US
Content-Language: en-US
user-agent: Microsoft-MacOutlook/14.7.2.170228
received-spf: None (protection.outlook.com: adobe.com does not designate
 permitted sender hosts)
spamdiagnosticoutput: 1:99
spamdiagnosticmetadata: NSPM
Content-Type: multipart/alternative;
	boundary="_000_D5CB46B62680Epentadobecom_"
MIME-Version: 1.0
X-MS-Exchange-CrossTenant-originalarrivaltime: 29 Aug 2017 20:28:42.0728
 (UTC)
X-MS-Exchange-CrossTenant-fromentityheader: Hosted
X-MS-Exchange-CrossTenant-id: fa7b1b5a-7b34-4387-94ae-d2c178decee1
X-MS-Exchange-Transport-CrossTenantHeadersStamped: BN6PR02MB3140
archived-at: Tue, 29 Aug 2017 20:28:56 -0000

--_000_D5CB46B62680Epentadobecom_
Content-Type: text/plain; charset="Windows-1252"
Content-Transfer-Encoding: quoted-printable

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=3D"position:relative" id=3D"outer">
   <div id=3D"header" style=3D"height:30px">=85</div>
    <div id=3D"wrapper">
        <div id=3D"inner">
             <div class=3D"ItemRenderer" id=3D"first">=85</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 offse=
tTop. 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 rea=
son.

If each of the <div>s had position:relative (or absolute), then offsetTop w=
ould 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 plac=
e 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 i=
ts elementParent.getBoundingClientRect. The difference between then gives t=
he 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 i=
f not set already, set it to "relative". This makes the x and y getters ret=
urn the right thing but may have unintended consequences.

Any advice from seasoned JavaScript developers is greatly appreciated!

Thanks,
Peter


--_000_D5CB46B62680Epentadobecom_--