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.
Actually 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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With