jQuery 上下文菜单与 jQuery Draggable 冲突 [英] jQuery Context Menu clashes with jQuery Draggable

问题描述

我正在尝试 jQuery 上下文菜单 和 jQuery Draggable 行.html" rel="noreferrer">jQGrid.

I'm trying the jQuery Context Menu with jQuery Draggable rows in a jQGrid.

我遇到的问题是，自从我添加了 jQuery 上下文菜单 可拖动操作在单击时触发(以及正常拖动).当我右键单击一行以获取菜单，然后在其外部单击另一行(以丢弃菜单)并且该行开始跟随光标时，它看起来有点奇怪.

The problem I'm having is that since I added the jQuery Context Menu the draggable action is triggered on single click (as well as the normal drag). It looks a little weird when I rightclick a row to get the menu, and then click outside it on another row (to discard the menu) and that row starts following the cursor.

它是否与以下 jQuery 上下文菜单片段中的 evt.stopPropagation(); 有关?

Does it have to do with the evt.stopPropagation(); in the following snippet from jQuery Context Menu?

$(this).mousedown( function(e) {
    var evt = e;
    evt.stopPropagation();
    $(this).mouseup( function(e) {
        e.stopPropagation();
        var srcElement = $(this);
        $(this).unbind('mouseup');
        if( evt.button == 2 ) {
            // Hide context menus that may be showing
            $(".contextMenu").hide();

除了在可拖动菜单或上下文菜单之间进行选择之外，我还能做些什么吗?

Is there anything I could do about it besides choosing between draggable or context menu?

推荐答案

我遇到了一个相关的问题——带有附加上下文菜单的可拖动项目并不总是可拖动的.在我的例子中，带有附加上下文菜单的可拖动项目(一个浮动在较大的包含 div 元素中的 div 元素)只能拖动一次——一旦拖动完成，在您单击包含的 div 之前，该项目不再可拖动.几乎相同的没有上下文菜单的可拖动项目总是可拖动的.为什么单击容器会恢复可拖动性我不知道，但它始终如一.

I've had a related problem--draggable items with attached context menus were not always draggable. In my case a draggable item (a div element floating in a larger containing div element) with attached context menu could only be dragged once--once the drag was complete, the item was no longer draggable until you clicked in the containing div. Nearly identical draggable items without context menus were always draggable. Why clicking the container restored draggability I do not know, but it did so consistently.

感谢您的问题为我指明了正确的方向，我查看了上下文菜单代码并对其进行了如下修改，从而解决了我的问题:

Thanks to your question pointing me in the right direction, I looked at the context menu code and modified it as follows, which resolved my problem:

jQuery(this).mousedown( function(e) {
    var evt = e;
    if (e.button == 2) //Added to make this compatible with draggable
        evt.stopPropagation();
    jQuery(this).mouseup( function(e) {
        if (e.button == 2) //Added to make this compatible with draggable
            e.stopPropagation();
        var srcElement = jQuery(this);

添加对 e.button == 2 的检查停止传播右键单击事件，现在我的可拖动 div 保持可拖动状态，上下文菜单仍然有效.到目前为止，我只在 IE8 中对此进行了测试，我不知道它是否能解决您的问题，但我很想知道它是否可以.

Adding the check for e.button == 2 stops propagation of the right-click event, and now my draggable divs stay draggable, and the context menu still works. I've only tested this in IE8 so far, and I don't know if it will solve your problem, but I'm interested to know if it does.

==编辑==

根据 Carl R 关于与 Chrome 兼容的建议:

Per suggestion from Carl R for compatibility with Chrome:

jQuery(this).mousedown( function(e) {
    var evt = e;
    if (e.button != 2) return; //Added to make this compatible with draggable
    evt.stopPropagation();
    jQuery(this).mouseup( function(e) {
        e.stopPropagation();
        var srcElement = jQuery(this);

我已经按照他的建议更改了模式，并且以这种方式在 IE8 中运行良好.

I've changed mode as he suggested, and it's working just fine in IE8 this way.

这篇关于jQuery 上下文菜单与 jQuery Draggable 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！