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

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

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

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'

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

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Jun 14, 2018 in Jira Service Desk

How the Telegram Integration for Jira helps Sergey's team take their support efficiency to the bank

...+ reading Fantasy). The same is true for him at the bank he works for: Efficiency is key when time literally equals money. Read on to learn how Sergey makes most of the time he has by...

451 views 2 4
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