280N/A<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

280N/A<div class="intro">

280N/A <p>This example shows how to position an element based on the document XY coordinate system.</p>

280N/A <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>

280N/A</div>

280N/A

280N/A<div class="example">

280N/A{{>node-xy-source}}

280N/A</div>

280N/A

280N/A<h2>Setting up the HTML</h2>

280N/A<p>First we need some HTML to work with.</p>

280N/A```

280N/A<div id="demo-stage">

280N/A <span id="demo"></span>

280N/A</div>

280N/A```

280N/A

280N/A<h2>Getting the Dimensions</h2>

280N/A<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>

671N/A```

280N/Avar onClick = function(e) {

280N/A Y.one('#demo').setXY([e.pageX, e.pageY]);

280N/A};

280N/A```

671N/A

671N/A<p>The last step is to assign the click handler to the <code>document</code> to capture all <code>click</code> events.</p>

671N/A```

671N/AY.one('#demo-stage').on('click', onClick);

618N/A```

672N/A

671N/A<h2>Complete Example Source</h2>

280N/A```

280N/A{{>node-xy-source}}

280N/A```

280N/A