jQuery Context Menu clashes with jQuery Draggable

Question

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

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.

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?

Answer 1

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);

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==

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);

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

Answer 2

I had the same issue and simply commented the first two *.stopPropagation() from jquery.contextMenu.js. Everything is working properly now.

The only possible use of these stops in this case might be for some minimal performance. In fact replacing these with *.preventDefault() would make more sense to me. Am I missing something?