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.