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

后端未结

关注

 4  1236

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.

相关标签:

4条回答

不思量自难忘°

2021-02-20 11:58
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

滥情空心

2021-02-20 12:07

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 ..

0 讨论(0)

佛祖请我去吃肉

2021-02-20 12:13

Try this:

$('#element').mousedown(function(event) {
    if(event.which == 1) {
        $('#element').draggable();
        $('#element').sortable();
    } else if (event.which == 3) {
        // context menu functions
    }
});

0 讨论(0)

渐次进展

2021-02-20 12:14
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

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

EDIT