sortable - restrict dragging only to parent <li> element?

Question

Hi,

I am using the sortable demo in jquery-ui. I am trying to add an item to the sortable list at runtime, like:

<ul id='panelSortable'>
</ul>

$("#panelSortable").sortable({
    distance: '15'
});

function generatePanel() {
    var html = "<li>";
    html += "<p>hello!</p>";
    html += "</li>";
    return html;
}

function addPanel() {
    var element = $(generatePanel());
    element.appendTo("#panelSortable");
    element.sortable();
    element.disableSelection();
}

the new element gets added to the sortable list ok. I can strangely drag the "p" element though, separately from the parent "li" element (which is also draggable). I want to restrict dragging to just the "li" element.

If I just declare a few "li" items in the page, they all work the normal way, where you can only drag the "li" items, not their "p" child:

<ul id='panelSortable'>
  <li><p>I work normally!</p></li>
</ul>

so I must be messing up the calls here to make the "p" elements also draggable?

Thanks

Answer 1

Argh ok you don't need to call sortable() on element, that should just be done on the parent "ul" item it looks like. If you remove that and just add the element as shown above, sorting is enabled on it just fine.

Thanks