我们可以使JQuery UI可移动/可排序在右鼠标按钮上工作 [英] 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.

我要做的是切换功能，使上下文菜单对鼠标左键起作用点击和JQuery UI Draggable / Sortable可以点击鼠标右键。

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.

感谢您的帮助。

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

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.

推荐答案

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

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

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

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。这将阻止上下文菜单仅在您关注的元素上打开，而不是在整个页面上禁用它。

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.

更新：

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

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.

这篇关于我们可以使JQuery UI可移动/可排序在右鼠标按钮上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！