nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Where is JQuery UI droppable

Roald Bankras

While building this new plugin for Jira, I wanted to adopt the drag & drop functionality from the Agile Board. However, it seems that JQuery draggable and sortable are available, but droppable is somehow removed from the distribution.

I've tried to add the jquery.ui.droppable.js from corresponding version as a webresource to my plugin, but alas that does not add droppable capabilities to Jira.

Does anyone have any pointers how I can define my divs droppable?

Accepted answers

Roald Bankras

Solved it. Maybe with a workaround.

I've added the jquery.ui.droppable.js to my plugin from the distribution corresponding the version in Jira. But I have to use it through jQuery() instead of AJS.$()

All comments

EddieW_h8oivr

Are you defining a context for the webresources to load on?

Your templates must explicitly source the web-resources, or declare a context the web resource is bound to.

YOu can use Devtools in Chrome, or similar on other browsers to see if any of your resources, including the jquery lib are being loaded.

Roald Bankras

Solved it. Maybe with a workaround.

I've added the jquery.ui.droppable.js to my plugin from the distribution corresponding the version in Jira. But I have to use it through jQuery() instead of AJS.$()

Onkar Ahire

Hi Roald,

One of test code I have develop to find dragabble and droppable element.

Might help...

&lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;
		
		$("#table tbody").sortable(
		{
			stop: function( event, ui ) {
				var draggedItem = $(ui.item).find('td:first').text();
				var destinationDI=$(ui.item).prev().find('td:first').text();								
				alert("Source : "+draggedItem+" Destination : "+destinationDI);
			}	
		});
&lt;/script&gt;

Roald Bankras

The problem isn't that I cannot find droppable elements. De droppable methods from the jquery library aren't available, where the draggable methods are.

I can do:

AJS.$('div.dragthis').draggable()

But I get an error doing:

AJS.$('div.dropzone').droppable()

error:

Object [object Object] has no method 'droppable'

Onkar Ahire

Hi Roald,

Did you tried with this http://jqueryui.com/draggable/, I have taken the reference from link and implemented the code.

Regards

Onkar Ahire

pelizza

There is a formal solution for including JQuery UI's droppable. Include 'com.atlassian.auiplugin:jquery-ui-other' dependency on your atlassian-plugin.xml, inside a 'web-resource' tag and ensure that this web resource is being loaded on your context:

&lt;web-resource key="my-web-resources"&gt;
	&lt;context&gt;YOUR_CUSTOM_CONTEXT_OR_JIRA_PROVIDED_CONTEXT&lt;/context&gt;
	&lt;dependency&gt;com.atlassian.auiplugin:ajs&lt;/dependency&gt;
	&lt;dependency&gt;com.atlassian.auiplugin:jquery-ui-other&lt;/dependency&gt;
	&lt;dependency&gt;com.atlassian.auiplugin:aui-experimental-iconfont&lt;/dependency&gt;
&lt;/web-resource&gt;

This will add jquery-ui's droppable on AJS.$.ui and so you can use it normally.

Dmitrii Apanasevich

Thanks!

Frédéric Tardieu_huminder_

Hi Vitor, I added the dependencies you describe, and I see that the function I want to use is defined: AJS.$.ui.resizable, but what is the syntax to use it, given a selector? Thanks a lot, Fred

pelizza

Hi Frédéric, We were talking about the jQuery's droppable, but if you want to use the resizable, it is possible to do it just the same way. As you already have this function defined on the AJS.$.ui, you can follow the official documentation of jQueryUI in order to use the resizable. Just remember that you jQuery is defined at AJS.$ and not at $: http://jqueryui.com/resizable/