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

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) { ... }
});