jquery ui draggable конфликти с контекстното меню - jquery, потребителски интерфейс, contextmenu, jquery-ui-dragggable

В моя сайт правя десен клик върху нещо и азимам потребителско контекстно меню за отваряне, когато кликна върху една от опциите отвори html div елемент, който се появи и аз добавих jquery ui draggable опция към него.

Проблемът е, че за пръв път плъзгам 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" });

Ще оценя всяка помощ.

Благодаря

Отговори:

0 за отговор № 1

Много библиотеки на JavaScript използват $ като функция илииме на променлива, точно както jQuery прави. В случая на jQuery, $ е просто псевдоним за jQuery, така че цялата функционалност е достъпна без използване на $. Ако трябва да използваме друга JavaScript библиотека заедно с jQuery, можем да върнем контрола на $ обратно към другата библиотека с обаждане до jQuery.noConflict ();

виж примера тук:

jQuery.noConflict();

(function($){

//put ur jquery ui draggable code function here

})(jQuery);

---

0 за отговор № 2

Намерих решението, използвайки този отговор

връзка

Имах друга приставка за събитието с десен клик, което причиняваше конфликта, като този отговор

---