Databases
StackOverflow2013
Postsdbo
POjquery ui draggable conflicts with context menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery ui draggable conflicts with context menu
    text
    copied!<p>In my site i do a right click on something and i have a custom context menu opening, when i click one of the options i open a html div element that pops up and i added the jquery ui draggable option to it.</p> <p>The problem is that the first time i drag the div it gets stuck to the mouse and i need to click again to make it stick to the page.</p> <p>I found some answers on the we with the same problem, and i understood that it conflicts with the context menu plugin. I cant take of that plugin cuz i need it.</p> <p>Is there any thing i can do to solve this problem with out removing the plugin?</p> <p>How can the script be changed in order to stop the conflict? I have no clue what to change...</p> <p>The code for the context menu is this:</p> <pre><code>(function($) { $.fn.contextMenu = function ( name, actions, options ) { var me = this, menu = $('&lt;ul id="' + name + '" class="kcontextMenu kshadow"&gt;&lt;/ul&gt;').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 = $('&lt;li&gt;&lt;a class="kdontHover" href="#" id="contextItem'+newText+'"&gt;'+me+'&lt;/a&gt;&lt;/li&gt;'); 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 &amp;&amp; e.button == 0) || (options.leftClick == false &amp;&amp; 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 &lt; window.innerWidth) ? e.pageX : e.pageX - mWidth, yPos = ((e.pageY - window.scrollY) + mHeight &lt; 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; } }); </code></pre> <p>}</p> <pre><code>})($); </code></pre> <p>And i use it like this:</p> <pre><code>$('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 } ); }); </code></pre> <p>And then i add this to the div i created:</p> <pre><code> $(newDiv).draggable({ handle: ".kformTilteDiv" }); </code></pre> <p>I will appreciate any help.</p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload