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

Answer 1

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