This._mouseInit () is not a function

Question

I just updated my code to jqueryui 1.8, and it gave me this error: this._mouseInit is not a function. How can i fix this? I have a widget that starts to drag and stop with the mouse. here is my code:

$.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

            _create: function() {
                this.element.addClass("ui-boxTool");
                this.dragged = false;

                this._mouseInit();
                this.width = $('#toPinpoint').width();
                this.height = $('#toPinpoint').height();

                this.helper = $(document.createElement('div'))
                  .css({border:'1px dashed #c2c0c0'})
                  .css({cursor:'crosshair'})
                  .addClass("ui-boxTool-helper");
              },

              destroy: function() {
                this.element
                  .removeClass("ui-boxTool ui-boxTool-disabled")
                  .removeData("boxTool")
                  .unbind(".selectable");
                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;

        ...

            return false;
          },

          _mouseStop: function(event) {
            var self = this;

            this.dragged = false;

            var options = this.options;

            var clone = this.helper.clone()
              .removeClass('ui-boxTool-helper').appendTo(options.appendTo);



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

            this.helper.remove();
            //$('.view-mode').remove(this.helper);
            return false;
          }

        }));

Answer 1

The syntax has changed a bit, your starting line is:

$.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

Must be:

​ $.widget("ui.boxTool", $.ui.mouse, {

Make sure the last line also matches, }));should now be simple });.