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?

[Roald Bankras · Accepted solution]

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.$()

[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:

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

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

[Dmitrii Apanasevich]

Thanks!

[Frédéric Tardieu]

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/

[pelizza]

Hey, @Roald Bankras, great that you solved your problem, but try to use the embedded droppable as we are discussing here. It is more elegant, since you just reuse what the framework is providing to you :)

[Frédéric Tardieu]

Hi Vitor, Thanks a lot for your reply! As a matter of fact, when I trigger a AJS.$('deeper-left-panel').resizable(), I get an error: Uncaught TypeError: Cannot read property '0' of undefined One question: are the 3 lines of dependencies in your example (ajs, jquery-ui-other, aui-experimental-iconfont) needed, or just jquery-ui-other? Cheers, Fred

[pelizza]

Hi Frédéric, You need the AJS and the jquery-ui-other dependencies. Also, your selector is wrong, since you have to use as AJS.$('.deeper-left-panel') in order to locate an element by a class or as AJS.$('#deeper-left-panel') in order to locate an element by id.

[Frédéric Tardieu]

Hi Vitor, I finally got jQuery UI resizable() working, here's how: - the selector was misspelled in my comment, but was OK in the code, - after including all jQuery UI dependencies in atlassian-plugin.xml, I noticed that draggable() was working, but not resizable() - I then included jQuery UI CSS's as resources, and then it was working..; Thanks a lot for your help! Cheers, Fred

[pelizza]

No problem Fred :)

[Onkar Ahire]

Hi Roald,

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

Might help...

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
		
		$("#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);
			}	
		});
</script>

[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

[EddieW]

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.