node-xy.mustache

<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
<div class="intro">
    <p>This example shows how to position an element based on the document XY coordinate system.</p>
    <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>
</div>

<div class="example">
{{>node-xy-source}}
</div>

<h2>Setting up the HTML</h2>
<p>First we need some HTML to work with.</p>
```
<div id="demo-stage">
    <span id="demo"></span>
</div>
```

<h2>Getting the Dimensions</h2>
<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>
```
var onClick = function(e) {
    Y.one('#demo').setXY([e.pageX, e.pageY]);
};
```

<p>The last step is to assign the click handler to the <code>document</code> to capture all <code>click</code> events.</p>
```
Y.one('#demo-stage').on('click', onClick);
```

<h2>Complete Example Source</h2>
```
{{>node-xy-source}}
```