Where is JQuery UI droppable

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

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

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">

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

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

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/

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

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

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.

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

No problem Fred :)

0 vote
Eddie Webb Community Champion Mar 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.

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

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:


But I get an error doing:



Object [object Object] has no method 'droppable'

Hi Roald,

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


Onkar Ahire

Suggest an answer

Log in or Join to answer
Community showcase
Alexey Matveev
Published Saturday in Jira

How to run Jira in a docker container

Everything below is tested on Ubuntu 17.10. I prefer to use Jira in a docker container because: 1. I can install Jira with a couple of commands. 2. I can start and stop Jira just by starting and s...

300 views 6 8
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot