how to know event.pageX and event.pageY is increasing or decreasing in jQuery-Ui?

I am using this following jQuery-UI开发者_StackOverflow社区 code in my programming, can anybody know how to know, whether event.pageX and event.pageY is increasing or decreasing while resizing a particular div.

CODE:

fontSize = parseInt($(' span',this).css('fontSize'));
$(this).resizable({
               disabled:false,
               handles: 'nw, ne, se, sw',
               resize: function(event, ui) { 
                         xvalue = event.pageX;
                         yvalue = event.pageY;
                         fontSize = fontSize+.1;
                         $(" span",this).css("fontSize",fontSize);
                       }
}); 

can anybody how to get to know is that xvalue and yvalue is increasing or decreasing ??

var fontSize = parseInt($('span', this).css('fontSize'));
var xValue, yValue;

var f = function(event, ui) {
   var isXIncreasing = xXalue < event.pageX;
   var isYIncreasing = yValue < event.pageY;
   // ^ you can do something with these now

   xValue = event.pageX;
   yValue = event.pageY;
   fontSize = fontSize+.1;
   $('span', this).css("fontSize",fontSize);
};

$(this).resizable({
    disabled: false,
    handles:  'nw, ne, se, sw',
    resize:   f
});

You can compare ui.originalSize and ui.size to see whether the current resizing operation is decreasing or increasing the size.

For instance:

resize: function(event, ui) { 
    if (ui.size.height > ui.originalSize.height) {
        // element is taller than before
    } else {
        // element is the same size or smaller than before
    }
}

By analogy, you can use ui.size.width and ui.originalSize.width to see if the element is wider than before.

See the API.