Перестаньте сначала быть волоком

Это моя демонстрация: http://jsfiddle.net/michelejs/PeS2D/560/

Как я могу остановить первый <li>, который можно перетащить?

$(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");
        }
    });
});​

Большое спасибо.

5 4
jquery draggable jquery-ui-draggable

5 ответов:

Вы можете использовать опцию items в методе виджета .sortable(). В сочетании с селектором jQuery gt() Вы можете легко получить то, что ищете.

Это работает для меня (пример jsFiddle) :

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

Можно использовать свойство items: 

$(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/

5

Попробуйте это. http://jsfiddle.net/PeS2D/561/

Я добавил дополнительный класс header к первому li, а затем есть функция, которая называется cancel

Чтобы сохранить людей щелчком мыши:

[отмена] предотвращает сортировку, если вы начинаете с элементов, соответствующих селектору. Пример кода: Инициализируйте сортировку с помощью указанной опции отмены: 

$( ".selector" ).sortable({ cancel: "a,button" });

Получить или установить опцию отмены, после инициализации: 

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );

// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
2

Просто прочитайте документацию: http://api.jqueryui.com/sortable/#option-items

Опция items позволяет задать селектор для элементов сортируемых таблиц.

1

Скрипка: http://jsfiddle.net/PeS2D/562/

Вы можете установить его таким образом 

$(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");
        },
    items: 'li[id!=heading]'  
    });
});​

Затем добавьте id к вашему первому li 

 <li data-role="list-divider" role="heading" id="heading">Re-order</li>
1