Gallery

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

// Use this in place of the current Event Utility 'arrow' example code
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.01.18-21-05'
}).use('gallery-event-arrow', function(Y) {
 
    var robotA = Y.one('#A'),
        robotB = Y.one('#B');
 
    robotA.setData('x', parseInt(robotA.getStyle('left'), 10));
    robotA.setData('y', parseInt(robotA.getStyle('top'), 10));
    robotB.setData('x', parseInt(robotB.getStyle('left'), 10));
    robotB.setData('y', parseInt(robotB.getStyle('top'), 10));
 
    function move(e) {
        // to prevent page scrolling
        e.preventDefault();
 
        var xy = this.getData();
 
        switch (e.direction) {
            case 'n':  xy.y -= 10; break;
            case 's':  xy.y += 10; break;
            case 'w': xy.x -= 10; break;
            case 'e':  xy.x += 10; break;
            case 'nw': xy.y -= 10; xy.x -= 10; break;
            case 'ne': xy.y -= 10; xy.x += 10; break;
            case 'sw': xy.y += 10; xy.x -= 10; break;
            case 'se': xy.y += 10; xy.x += 10; break;
        }
 
        this.transition({
            top : (xy.y + 'px'),
            left: (xy.x + 'px'),
            duration: .2
        });
    }
 
    robotA.on("arrow", move);
    robotB.on("arrow", move);
 
    // Or via delegation
    Y.one('#demo').delegate('arrow', move, '.robot');
 
});