Any one know about jQuery UI mouse widget?

Question

I've started working with jQuery UI.

I want to know more about the jQuery UI mouse widget. I'm trying to find out the documentation of it, but it is not available. Any one knows about where the resource is available?

Answer 1

Check out http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/ the section titled "Involving the Mouse"

Call this._mouseInit in your own widget's _init function, then overwrite the _mouseDown, _mouseDrag, etc functions.

Answer 2

The Mouse widget is an internal plugin that seems to be mostly (or only) used for low-level drag-and-drop handling.

I just wrote a blog post about using it to roll your own drag-and-drop (instead of using Draggable): http://www.solitr.com/blog/2012/05/roll-your-own-drag-and-drop-handling-with-jquery-ui/

The gist of it is, you can subclass it, like so:

$.widget('ui.custommouse', $.ui.mouse, {
  options: {
    mouseStart: function(e) {},
    mouseDrag: function(e) {},
    mouseStop: function(e) {},
    mouseCapture: function(e) { return true; }
  },
  // Forward events to custom handlers
  _mouseStart: function(e) { return this.options.mouseStart(e); },
  _mouseDrag: function(e) { return this.options.mouseDrag(e); },
  _mouseStop: function(e) { return this.options.mouseStop(e); },
  _mouseCapture: function(e) { return this.options.mouseCapture(e); }
  // Bookkeeping, inspired by Draggable
  widgetEventPrefix: 'custommouse',
  _init: function() {
    return this._mouseInit();
  },
  _create: function() {
    return this.element.addClass('ui-custommouse');
  },
  _destroy: function() {
    this._mouseDestroy();
    return this.element.removeClass('ui-custommouse');
  },
});

Then instantiate the custommouse plugin you just defined, and pass your own event handlers as options:

$('#containerElement').custommouse({
  mouseStart: function(e) { ... },
  mouseDrag: function(e) { ... },
  mouseStop: function(e) { ... }
});