jquery ui draggable konflikty s kontextovým menu - jquery, user-interface, contextmenu, jquery-ui-draggable

Na mojom webe kliknem pravým tlačidlom na niečo a jamať vlastné kontextové menu otvorenie, keď som kliknúť na jednu z možností i otvoriť html div element, ktorý sa objaví a ja som pridal jquery ui draggable možnosť na to.

Problém je v tom, že prvýkrát pretiahnem div, ktorý sa prilepí na myš a musím znovu kliknúť, aby sa držal na stránke.

Našiel som niekoľko odpovedí o tom s tým istým problémom a uvedomil som si, že je v rozpore s doplnkom kontextovej ponuky. Nemôžem vziať ten plugin, pretože to potrebujem.

Existuje nejaká vec, ktorú môžem urobiť, aby som vyriešil tento problém bez toho, aby som odstránila plugin?

Ako sa skript môže zmeniť, aby sa zastavil konflikt? Nemám tušenie, čo sa má zmeniť ...

Kód pre kontextové menu je toto:

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

}

})($);

A používam to takto:

$("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 }
);
});

A potom som to pridať do div vytvoril:

 $(newDiv).draggable({ handle: ".kformTilteDiv" });

Oceňujem akúkoľvek pomoc.

Vďaka

odpovede:

0 pre odpoveď č. 1

Mnoho knižníc jazyka JavaScript používa $ ako funkciu alebonázov premennej, rovnako ako jQuery. V prípade jQuery je $ len alias pre jQuery, takže všetky funkcie sú dostupné bez použitia $. Ak potrebujeme použiť inú knižnicu JavaScript spolu s jQuery, môžeme vrátiť kontrolu $ späť do druhej knižnice s volaním na jQuery.noConflict ();

pozri príklad tu:

jQuery.noConflict();

(function($){

//put ur jquery ui draggable code function here

})(jQuery);

---

0 pre odpoveď č. 2

Našiel som riešenie pomocou tejto odpovede

odkaz

Mal som iný plugin pre udalosť pravého kliknutia, ktorá spôsobovala konflikt, ako je tá odpoveď

---