jquery ui 可拖动与上下文菜单冲突

Question

在我的网站中，我右键单击某些内容，然后打开一个自定义上下文菜单，当我单击其中一个选项时，我打开一个弹出的 html div 元素，并向其中添加了 jquery ui 可拖动选项。

问题是，第一次拖动 div 时，它会粘在鼠标上，我需要再次单击才能使其粘在页面上。

我在我们上找到了一些有同样问题的答案，我知道它与上下文菜单插件冲突。我无法使用该插件，因为我需要它。

我可以做些什么来解决这个问题而不删除插件吗？

如何更改脚本才能停止冲突？ 我不知道要更改什么...

上下文菜单的代码是这样的：

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

}

})($);

我这样使用它：

$('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 }
);
});

然后我将其添加到我创建的 div 中：

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

我将不胜感激任何帮助。

谢谢

Answer 1

许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 中，$ 只是 jQuery 的别名，因此所有功能都可以在不使用 $ 的情况下使用。如果我们需要与 jQuery 一起使用另一个 JavaScript 库，我们可以通过调用 jQuery.noConflict(); 将 $ 的控制权返回给另一个库；

请参阅此处的示例：

jQuery.noConflict();

(function($){

//put ur jquery ui draggable code function here

})(jQuery);

Answer 2

我使用这个答案找到了解决方案

链接

我有另一个插件导致冲突的右键单击事件，就像那个答案