Can We Make JQuery UI Draggables / Sortables To Work On Right Mouse Button

Question

I have a page that has functions bind to both left and right mouse button, ie. draggable/sortable on left mouse button, and custom context menu on right mouse button.

Wh

Answer 1

Instead of creating a custom build of jQuery UI, and modifying files directly, you can just extend draggable (and sortable, if you need to), to allow right mouse clicks. All of the mouse interactions in jQuery UI are handled by Mouse Widget ($.ui.mouse). And draggable widget is extending mouse widget. So in a nutshell, draggable has all the same methods that mouse does. If you override those on the draggable prototype ($.ui.draggable.prototype) then you can get your functionality on all draggable objects without having to modify jQuery UI files.

It's generally not a great idea to modify 3rd party frameworks directly, since it will prevent you from upgrading, or will require you to copy your changes every time you upgrade.

The main idea is to override a few functions:

$.extend($.ui.draggable.prototype, {...});

Here's a working example of the modified draggable: http://jsfiddle.net/NjXdv/4/ It takes an extra parameter: mouseButton. If you don't pass anything in, it will use left mouse button. If you pass 3 in, it will use right mouse button. You can also try to pass 2 for middle button.

P.S. This will stop context menu from opening only on the elements that you care about, instead of disabling it on the whole page.

Update:

If you want to enable all jQuery UI controls to have the ability to work with a different mouse button, then instead of extending draggable, you should extend mouse itself. As I said before, every single jQuery UI control reads mouse events from the $.ui.mouse, so if you override that, it will cascade to every control. Here's updated example with both sortable and draggable: http://jsfiddle.net/NjXdv/7/. Hope this helps.