На моем сайте я делаю щелчок правой кнопкой мыши по чему-то, и у меня открывается настраиваемое контекстное меню, когда я нажимаю одну из опций, открываю всплывающий элемент div html и добавляю к нему перетаскиваемый параметр 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" });
Буду признателен за любую помощь.
Спасибо