jQuery的可拖动与上下文菜单的冲突

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

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

Link

我有另外的插件右键单击事件是造成冲突，这样的答案

Answer 2

许多JavaScript库使用$作为函数或变量名称，就像jQuery一样。在jQuery的情况下，$是jQuery的别名，所以所有功能都可以在不使用$的情况下使用。如果我们需要在jQuery中使用另一个JavaScript库，我们可以通过调用jQuery.noConflict（）;将$ back控件返回给另一个库。

看到这里的例子：

jQuery.noConflict(); 

(function($){ 

//put ur jquery ui draggable code function here 

})(jQuery);