jquery ui draggable conflicts with context menu

Question

In my site i do a right click on something and i have a custom context menu opening, when i click one of the options i open a html div element that pops up and i added the jquery ui draggable option to it.

The problem is that the first time i drag the div it gets stuck to the mouse and i need to click again to make it stick to the page.

I found some answers on the we with the same problem, and i understood that it conflicts with the context menu plugin. I cant take of that plugin cuz i need it.

Is there any thing i can do to solve this problem with out removing the plugin?

How can the script be changed in order to stop the conflict? I have no clue what to change...

The code for the context menu is this:

(function($) {


 $.fn.contextMenu = function ( name, actions, options ) {
var me = this,
menu = $('<ul id="' + name + '" class="kcontextMenu kshadow"></ul>').hide().appendTo('body'),
activeElement = null, // last clicked element that responds with contextMenu
hideMenu = function() {
  $('.kcontextMenu:visible').each(function() {
    $(this).trigger("closed");
    $(this).hide();
    $('body').unbind('click', hideMenu);
  });
},
default_options = {
  disable_native_context_menu: false, // disables the native contextmenu everywhere you click
  leftClick: false // show menu on left mouse click instead of right
},
options = $.extend(default_options, options);

$(document).bind('contextmenu', function(e) {
  if (options.disable_native_context_menu) {
    e.preventDefault();
  }
  hideMenu();
});

  $.each(actions, function (me, itemOptions) {
  newText = me.replace(/\s/g, "");
  var menuItem = $('<li><a class="kdontHover" href="#" id="contextItem'+newText+'">'+me+'</a></li>');

  if (itemOptions.klass) {
    menuItem.attr("class", itemOptions.klass);
  }

  menuItem.appendTo(menu).bind('click', function(e) {
    itemOptions.click(activeElement);
    e.preventDefault();
  });
});


return me.bind('contextmenu click', function(e){
  // Hide any existing context menus
  hideMenu();

  if( (options.leftClick && e.button == 0) || (options.leftClick == false && e.button == 2) ){

    activeElement = $(this); // set clicked element

    if (options.showMenu) {
      options.showMenu.call(menu, activeElement);
    }

    // Bind to the closed event if there is a hideMenu handler specified
    if (options.hideMenu) {
      menu.bind("closed", function() {
        options.hideMenu.call(menu, activeElement);
      });
    }

    menu.css({
      visibility: 'hidden',
      position: 'absolute',
      zIndex: 1000000000
    });

    // include margin so it can be used to offset from page border.
    var mWidth = menu.outerWidth(true),
      mHeight = menu.outerHeight(true),
      xPos = ((e.pageX - window.scrollX) + mWidth < window.innerWidth) ? e.pageX : e.pageX - mWidth,
      yPos = ((e.pageY - window.scrollY) + mHeight < window.innerHeight) ? e.pageY : e.pageY - mHeight;

    menu.show(0, function() {
      $('body').bind('click', hideMenu);
    }).css({
      visibility: 'visible',
      top: yPos + 'px',
      left: xPos + 'px',
      zIndex: 1000000000
    });

    return false;
  }
});

}

})($);

And i use it like this:

$('input:text, input:password').rightClick(function (e) {
    $(this).contextMenu('contextMenuInput', {
        'Capture This': {
            click: function (element) {   // element is the jquery obj clicked on when context menu launched
            },
            klass: "kgo kdisabled" // a custom css class for this menu item (usable for styling)
        },
        'Create List': {
            click: function (element) {
                openDiv(element);
            },
            klass: "kfilter"
        },
        'Collect Data': {
            click: function (element) {
            },
            klass: "kcapture kdisabled"
        }
    },
    { disable_native_context_menu: true }
);
});

And then i add this to the div i created:

 $(newDiv).draggable({ handle: ".kformTilteDiv" });

I will appreciate any help.

Thanks

score 1 · Answer 1 · answered Feb 14 '12 at 07:36

1

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to jQuery.noConflict();

see example here :

jQuery.noConflict();

(function($){

//put ur jquery ui draggable code function here

})(jQuery);

answered Feb 14 '12 at 07:36

thecodedeveloper.com

3,220
5
36
67

Thank you for the quick response. I am not using any other javascript library, why should this be the problem? Also if i do like you suggested all my other functions for that div get disabled... should i wrap my hole function with the code you wrote above? – Ovi Feb 14 '12 at 08:01
you dont need use other java script library, u can replace ur Conflict code with that comment line //put ur jquery ui draggable code function here – thecodedeveloper.com Feb 14 '12 at 08:08
I added that code, but now other things on the function dont work, and i get errors for them... – Ovi Feb 14 '12 at 08:37

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

I found the solution using this answer

Link

I had another plugin for the right click event that was causing the conflict, like that answer

edited May 23 '17 at 11:48

Community

1
1

answered Feb 14 '12 at 09:29

Ovi

2,459
9
50
72

jquery ui draggable conflicts with context menu

2 Answers2