Where is JQuery UI droppable

Roald Bankras March 22, 2014

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?

4 answers

1 accepted

0 votes
Answer accepted
Roald Bankras March 23, 2014

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

3 votes
pelizza
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 13, 2014

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 17, 2015

Thanks!

Frédéric Tardieu
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 24, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 25, 2015

No problem Fred :)

0 votes
Onkar Ahire
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 23, 2014

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 March 23, 2014

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 23, 2014

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

0 votes
EddieW
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 22, 2014

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.

Suggest an answer

Log in or Sign up to answer