can't not create a rectangle with ui.boxer (widget)

if i am using following with 1.7.2 ui then i can draw rectanlge with mouse events

Boxer = $.extend({}, $.ui.mouse, {

_init: function () {

this.element.addClass("ui-boxer");

this.dragged = false;

console.log('start');

this._mouseInit();

this.helper = $(document.createElement('div'))

.css({ border: '1px dotted black' })

.addClass("ui-boxer-helper");

},

init: function () {

this.element.addClass("ui-boxer");

this.dragged = false;

console.log('start');

this._mouseInit();

this.helper = $(document.createElement('div'))

.css({ border: '1px dotted black' })

.addClass("ui-boxer-helper");

},

destroy: function () {

this.element.removeClass("ui-boxer ui-boxer-disabled").removeData("boxer").unbind(".boxer");

this._mouseDestroy();

return this;

},

_mouseStart: function (event) {

var self = this;

this.opos = [event.pageX, event.pageY];

if (this.options.disabled)

return;

var options = this.options;

this._trigger("start", event);

$(options.appendTo).append(this.helper);

this.helper.css({

"z-index": 100,

"position": "absolute",

"left": event.clientX,

"top": event.clientY,

"width": 0,

"height": 0

});

},

_mouseDrag: function (event) {

var self = this;

this.dragged = true;

if (this.options.disabled)

return;

var options = this.options;

var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;

if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }

if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }

this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });

this._trigger("drag", event);

return false;

},

_mouseStop: function (event) {

var self = this;

this.dragged = false;

var options = this.options;

var clone = this.helper.clone().removeClass('ui-boxer-helper').appendTo(this.element);

this._trigger("stop", event, { box: clone });

this.helper.remove();

return false;

}

});

$.widget("ui.boxer", Boxer);

but if i am using 1.9.2 with following than i can't

$.widget("ui.boxer", $.ui.mouse, {

_init: function () {

this.element.addClass("ui-boxer");

this.dragged = false;

console.log('start');

this._mouseInit();

this.helper = $(document.createElement('div'))

.css({ border: '1px dotted black' })

.addClass("ui-boxer-helper");

},

destroy: function () {

this.element.removeClass("ui-boxer ui-boxer-disabled").removeData("boxer").unbind(".boxer");

this._mouseDestroy();

return this;

},

_mouseStart: function (event) {

var self = this;

this.opos = [event.pageX, event.pageY];

if (this.options.disabled)

return;

var options = this.options;

this._trigger("start", event);

$(options.appendTo).append(this.helper);

this.helper.css({

"z-index": 100,

"position": "absolute",

"left": event.clientX,

"top": event.clientY,

"width": 0,

"height": 0

});

},

_mouseDrag: function (event) {

var self = this;

this.dragged = true;

if (this.options.disabled)

return;

var options = this.options;

var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;

if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }

if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }

this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });

this._trigger("drag", event);

return false;

},

_mouseStop: function (event) {

var self = this;

this.dragged = false;

var options = this.options;

var clone = this.helper.clone().removeClass('ui-boxer-helper').appendTo(this.element);

this._trigger("stop", event, { box: clone });

this.helper.remove();

return false;

}

});