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

问题描述

我正在尝试将 jQuery Context菜单与 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.

== EDIT ==

==EDIT==

根据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屋！