Question

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

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

感谢您的帮助。

PS：我可以使自定义上下文菜单适用于鼠标左键。所以我只需要帮助JQuery UI Draggable / Sortable。感谢。

Answer 1

如果不破解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的未来版本中，这将得到支持，没有任何黑客攻击。

这是一个工作小提琴：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，你必须检查兼容性或移植你的mods进入更新版本。对于我所看到的，jQuery UI 2.x将支持which实现。

希望这有帮助。

Answer 2

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

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

主要思想是覆盖一些功能：

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

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

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

<强>更新

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

Answer 3

来自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 AND RIGHT的键码，那么它可能会起作用..

Answer 4

试试这个：

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

我们可以使JQuery UI可拖动/可排序以在鼠标右键上工作

4 个答案:

修改