10

我有一个页面，其功能绑定到鼠标左右键，即。鼠标左键可拖动/可排序，鼠标右键可自定义上下文菜单。

我想要做的是切换功能，以便上下文菜单在鼠标左键单击时起作用，而 JQuery UI Draggable/Sortable 在鼠标右键单击时起作用。

谢谢你的帮助。

PS：我可以使自定义上下文菜单在鼠标左键上工作。所以我只需要 JQuery UI Draggable/Sortable 的帮助。谢谢。

4

4 回答 4

11

如果不破解 jQuery UI 代码，实际上是不可能的。

我不知道您为什么要使用此行为，因为可能会使您的最终用户感到困惑，但这是一个可能的解决方案。

从这个 jQuery UI 票http://bugs.jqueryui.com/ticket/6909开始，我构建了一个自定义版本的 jQuery UI。所以你必须使用库的修改版本。

我使用以下方法禁用整个页面的浏览器右键单击默认菜单：

<body oncontextmenu="return false;">

或引用特定元素：

$("#sortable").bind("contextmenu",function(e){
    return false;
});

以下是对 jQuery UI 代码的两个主要自定义编辑。

在ui.mouse默认选项中添加选项：

其中：1

来自 jQuery UI 参考：

其中（数字）默认值：1

一个与“which”事件属性匹配的数字，以指示按下的鼠标按钮。（0 = 任意按钮，1 = 左按钮，2 = 中按钮，3 = 右按钮）

在函数_mouseDown中更改代码以读取此选项：

tnIsLeft = (event.which == this.options.which) // instead of this (event.which == 1)

理论上，在未来版本的 jQuery UI 中，这将在没有任何 hack 的情况下得到支持。

这是一个工作小提琴：http: //jsfiddle.net/IrvinDominin/nLdLu/

编辑

以下是带有右键单击 mod 的 pastebin 版本，包括：

  • 包括：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

链接： http: //pastebin.com/nn3Pj0pM

通常，修改后的副本并不是一件好事，您还可以扩展和覆盖让鼠标右键起作用所需的两个功能，但主要问题仍然存在：如果您升级 jQuery UI，您必须检查兼容性或将您的 mod 移植到更新的版本。对于我所看到的 jQuery UI 2.x 将支持该which实现。

希望这可以帮助。

于 2013-03-30T17:16:57.193 回答
7

无需创建 jQuery UI 的自定义构建并直接修改文件，您只需扩展可拖动（和可排序，如果需要），以允许鼠标右键单击。jQuery UI 中的所有鼠标交互都由 Mouse Widget ($.ui.mouse) 处理。并且可拖动小部件正在扩展鼠标小部件。所以简而言之，draggable 具有与鼠标相同的方法。如果您覆盖可拖动原型（$.ui.draggable.prototype）上的那些，那么您可以在所有可拖动对象上获得您的功能，而无需修改 jQuery UI 文件。

直接修改 3rd 方框架通常不是一个好主意，因为它会阻止您升级，或者每次升级时都会要求您复制更改。

主要思想是重写一些函数：

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

这是修改后的可拖动的工作示例：http: //jsfiddle.net/NjXdv/4/ 它需要一个额外的参数：mouseButton。如果您不传递任何内容，它将使用鼠标左键。如果你传入 3，它将使用鼠标右键。您也可以尝试将 2 传递给中间按钮。

PS 这将阻止上下文菜单仅在您关心的元素上打开，而不是在整个页面上禁用它。

更新：

如果你想让所有 jQuery UI 控件能够使用不同的鼠标按钮，那么你应该扩展鼠标本身而不是扩展可拖动的。正如我之前所说，每个 jQuery UI 控件都从 $.ui.mouse 读取鼠标事件，所以如果你覆盖它，它将级联到每个控件。这是可排序和可拖动的更新示例：http: //jsfiddle.net/NjXdv/7/。希望这可以帮助。

于 2013-04-04T01:34:51.863 回答
1

来自 JQuery Ui 核心文件

$.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
    }
});

如果我们交换 LEFT 和 RIGHT 的键码，那么它可能会起作用..

于 2013-04-05T08:16:55.707 回答
0

试试这个：

$('#element').mousedown(function(event) {
    if(event.which == 1) {
        $('#element').draggable();
        $('#element').sortable();
    } else if (event.which == 3) {
        // context menu functions
    }
});
于 2013-04-05T11:35:46.440 回答