Version 3.17.2

Example: Node Positioning

This example shows how to position an element based on the document XY coordinate system.

Click anywhere on the gray box below and the little orange box will move to the click position.

Setting up the HTML

First we need some HTML to work with.

<div id="demo-stage">
    <span id="demo"></span>
</div>

Getting the Dimensions

In this example, we will listen for clicks on the document and update the position of our demo node to match the click position.

var onClick = function(e) {
    Y.one('#demo').setXY([e.pageX, e.pageY]);
};

The last step is to assign the click handler to the document to capture all click events.

Y.one('#demo-stage').on('click', onClick);

Complete Example Source

<div id="demo-stage">
    <span id="demo"></span>
</div>

<script type="text/javascript">
YUI().use('node', function(Y) {
    var onClick = function(e) {
        Y.one('#demo').setXY([e.pageX, e.pageY]);
    };

    Y.one('#demo-stage').on('click', onClick);
});
</script>