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