我们可以使JQuery UI可移动/可排序在右鼠标按钮上工作

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/

编辑

以下是带有右键单击模式的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实现.

希望这可以帮助.

Answer 2

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

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

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

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

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

PS这将停止上下文菜单仅打开您关注的元素,而不是在整个页面上禁用它.

更新:

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