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.
What I want to do is switch the functions so that context menu works on left mouse button clicks and JQuery UI Draggable/Sortable works on right mouse button click.
Thanks for any help.
PS: I can make the custom context menu to work on left mouse button. So I only need help with the JQuery UI Draggable/Sortable only. Thanks.
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.
What I want to do is switch the functions so that context menu works on left mouse button clicks and JQuery UI Draggable/Sortable works on right mouse button click.
Thanks for any help.
PS: I can make the custom context menu to work on left mouse button. So I only need help with the JQuery UI Draggable/Sortable only. Thanks.
Share Improve this question asked Mar 28, 2013 at 1:32 asyadiqinasyadiqin 1,6673 gold badges19 silver badges25 bronze badges4 Answers
Reset to default 11 +25Actually is not possible without hacking the jQuery UI code.
I don't know why you want to use this behavior because can confuse your final users, but here is a possible solution.
Starting from this jQuery UI ticket http://bugs.jqueryui.com/ticket/6909 I build up a custom version of jQuery UI. So you have to use a modified version of the library.
I disable the browser right click default menu for the whole page using:
<body oncontextmenu="return false;">
or referring to a specific element:
$("#sortable").bind("contextmenu",function(e){
return false;
});
Here are the two main custom edits to jQuery UI code.
In ui.mouse default options add the option:
which:1
From jQuery UI reference:
which (Number) Default: 1
A number that matches the "which" event property to indicate the mousebutton that is pressed. (0 = Any Button, 1 = Left Button, 2 = Middle Button, 3 = Right Button)
In function _mouseDown change the code to read this option:
tnIsLeft = (event.which == this.options.which) // instead of this (event.which == 1)
In theory in future version of jQuery UI this will be supported without any hack.
Here is a working fiddle: http://jsfiddle.net/IrvinDominin/nLdLu/
EDIT
Following there is a pastebin version with right click mod including:
- Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js
Link: http://pastebin.com/nn3Pj0pM
Usually a modded copy is not a great thing, you can also extend and override the two functions needed to let the right mouse button works, but the main problem remains: if you upgrade jQuery UI you have to check compatibility or port your mods into newer version. For what I see jQuery UI 2.x will support the which implementation.
Hope this helps.
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.
From JQuery Ui core File
$.extend( $.ui, {
version: "1.8.23",
keyCode: {
ALT: 18,
BACKSPACE: 8,
CAPS_LOCK: 20,
COMMA: 188,
COMMAND: 91,
COMMAND_LEFT: 91, // COMMAND
COMMAND_RIGHT: 93,
CONTROL: 17,
DELETE: 46,
DOWN: 40,
END: 35,
ENTER: 13,
ESCAPE: 27,
HOME: 36,
INSERT: 45,
LEFT: 37,
MENU: 93, // COMMAND_RIGHT
NUMPAD_ADD: 107,
NUMPAD_DECIMAL: 110,
NUMPAD_DIVIDE: 111,
NUMPAD_ENTER: 108,
NUMPAD_MULTIPLY: 106,
NUMPAD_SUBTRACT: 109,
PAGE_DOWN: 34,
PAGE_UP: 33,
PERIOD: 190,
RIGHT: 39,
SHIFT: 16,
SPACE: 32,
TAB: 9,
UP: 38,
WINDOWS: 91 // COMMAND
}
});
if we swap keycode of LEFT AND RIGHT then it may work ..
Try this:
$('#element').mousedown(function(event) {
if(event.which == 1) {
$('#element').draggable();
$('#element').sortable();
} else if (event.which == 3) {
// context menu functions
}
});