fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>This example shows how to position an element based on the document XY coordinate system.</p>
e8e434cab832608481c5c4284a4cc0a783a080c4Matt Sweeney <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-xy-source}}
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the HTML</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>
9e916064638e1ec4de5d997bf484bb1138b5325eMatt Sweeney<div id="demo-stage">
9e916064638e1ec4de5d997bf484bb1138b5325eMatt Sweeney <span id="demo"></span>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Getting the Dimensions</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>In this example, we will listen for clicks on the document and update the position of our demo node to match the click position.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeneyvar onClick = function(e) {
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>The last step is to assign the click handler to the <code>document</code> to capture all <code>click</code> events.</p>
9e916064638e1ec4de5d997bf484bb1138b5325eMatt SweeneyY.one('#demo-stage').on('click', onClick);
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-xy-source}}