How to Wrap jQueryUI in GWT to make GWT widgets draggable

Following my previous post, I've been trying to get GWT and jQuery/jQueryUI to work together.  I came across this blog How to Create a Simple jQuery Wrapper written by Matthew Edwards and after some tinkering I was able to get a make a GWT Label widget draggable using the jQueryUI draggable() function.

I've cut and pasted most of Matthew's instructions below and highlighted in red what I did to allow gwt-Labels to be draggable.  I'm hoping I can apply the same logic to other javascript libraries and gwt widgets.

1. Reference the jQuery and jQueryUI libraries in your web page

2. Reference the GWT application in your web page

3. Create a JSNI method to call jQuery 

// Using Selector
public static native void draggable(String selector) /*-{
        $wnd.jQuery(selector).draggable();
}-*/; 

4. Call the method from within GWT 

// Using Selector 

RootPanel.get(sectionTagID).add(new Label("draggable label");
draggable(".gwt-Label");

One thing to note is that "sectionTagID" must be the id of a  <section> tag and not a <div> tag.
e.g.
<section id="id_of_section_tag"></section>  will work,

I tried using an id of a div tag, but the RootPanel.element.add() function didn't even work.  i.e. no GWT labels were added to my webpage.  (Perhaps you can suggest a reason).

I will try and write a step-by-step when I get some more time and have played more with other javascript libraries and GWT widgets, but hopefully there's enough here to inspire you to try it out in the meantime.

jQueryUI vs GWT: Drag and Drop

So you want to try and create an application that has simple drag and drop capabilities?  My advice is if you're app relies heavily on drag and drop; and drawing connections between widgets - use jQueryUI.

GWT Drag and Drop
I started using GWT/GAE because I could host my application on Google's cloud for free.  I wanted to create an application that utilises drag and drop for a web-based diagram drawing tool (something like lucidchart).  I googled "GWT and drag and drop" and used the gwt-dnd library.  It's a bit of a learning curve, but once you get the hang of what DropController and DragController it becomes pretty simple.  If all you want to do is drag and drop then using the gwt-dnd library is a good option.

However if you want to do more complicated things like, drawing a line between two widgets then you might be better off using jQueryUI.   There are gwt libraries such as gwt-connectors and gwt-links, but these don't offer the same user experience as jsPlumb which uses jQueryUI.

jQueryUI Drag and Drop
jQueryUI and its big brother jQuery are powerful JavaScript libraries that provide rich user interface experiences.  jsPlumb was just one extended application of jQueryUI/jQuery, but there are many others.  If you're familiar with CSS, then understanding jQuery and jQueryUI should be a breeze as it works off the same selectors that CSS does.  For example to make all divs of class "widget" to be draggable,  you could just write:

$(".widget").draggable();

Combining GWT and jQueryUI
Ideally if I could combine the gwt-widgets that I've already created in my app with the added functionality that jQueryUI can offer I'd be a happy chap.  This is where I'm at now.  So far I've been trialling JSNI, but am running in to difficulties because the gwt-widgets load after the jQueryUI runs rendering my jQueryUI code useless.  Another avenue I'm going to be investigating is Google's Closure Lab.  Either way I'll update the progress and post it on here.  If you're writing Google Apps and trying to use your own custom JavaScript would love to hear from you too.