Making an element draggable?

Question

Hi,

I'm trying to make an element draggable, like so:

var element = $("<li id='test'>Hello</li>");
element.appendTo("#panelParent");
element.draggable("enable");
element.draggable("option", "connectToSortable", '#panelTarget');
element.draggable("option", "helper", 'clone');
element.draggable("option", "revert", 'invalid');

nothing happens when I try dragging this element. It works fine though if I embed the object in the page beforehand instead of trying to dynamically create the element. Any idea what I'm missing? For example, this works:

$(function() {
    $("#test").draggable({
        connectToSortable: '#panelTarget',
        helper: 'clone',
        revert: 'invalid'
     });
});

<ul>
  <li id='test'>Hello</li>
</ul>

Thanks

Answer 1

Oh actually the call should be:

element.draggable();

not:

element.draggable("enable");

maybe I'm reading the docs wrong, it does say:

.draggable( "enable" )

?

Thanks