Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 985
asyadiqin Avatar asked Mar 28 '13 01:03

asyadiqin


1 Answers

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/

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.

like image 107
Irvin Dominin Avatar answered Nov 06 '22 23:11

Irvin Dominin