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

Я нашел решение, используя этот ответ

Link

У меня был другой плагин для правой щелкните событие, которое вызывает конфликт, как этот ответ

Answer 2

Многие библиотеки JavaScript используют $ как функция или имя переменной, так же как и JQuery. В случае jQuery, $ является просто псевдонимом для jQuery, поэтому все функции доступны без использования $. Если нам нужно использовать другую библиотеку JavaScript вместе с jQuery, мы можем вернуть управление $ back в другую библиотеку с вызовом jQuery.noConflict();

смотри пример здесь:

jQuery.noConflict(); 

(function($){ 

//put ur jquery ui draggable code function here 

})(jQuery);