Question

在我的网站中我右键单击某些内容并且我有一个自定义上下文菜单打开，当我单击其中一个选项时，我打开一个弹出的html div元素，并添加了jquery ui draggable选项。< / p>

问题是我第一次拖动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

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

Link

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

jquery ui draggable与上下文菜单冲突

2 个答案: