Stop first <li> being draggable

Question

This is my demo: http://jsfiddle.net/michelejs/PeS2D/560/

How can I stop the first <li> being draggable?

$(document).ready(function(e) {
$('li').removeClass('ui-corner-bottom');
$('ul')
    .addClass('ui-corner-top')
    .removeClass('ui-corner-all')
    .sortable({
        'containment': 'parent',
        'opacity': 0.6,
        update: function(event, ui) {
            alert("dropped");
        }
    });
});​

Thanks a lot.

Answer 1

You can use the items property:

$(document).ready(function(e) {
    $('li').removeClass('ui-corner-bottom');
    $('ul')
        .addClass('ui-corner-top')
        .removeClass('ui-corner-all')
        .sortable({
            items: 'li:not(:first)',
            'containment': 'parent',
            'opacity': 0.6,
            update: function(event, ui) {
                console.log(ui)

            }
        });
});

http://jsfiddle.net/ppRJL/