CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
kmunky
kmunky

Reputation: 15583

jQuery UI Sortable: How do I prevent a specific list item from being moved?

I have this list:

<ul>
    <li class="line"><a href="#" class="drag">header (do not sort)</a></li>
    <li class="line"><a href="#" class="drag">line one</a></li>
    <li class="line"><a href="#" class="drag">line two</a></li>
</ul>

How can I prevent the first li from being moved?

Upvotes: 8

Views: 9319

Answers (2)

Mark Bell
Mark Bell

Reputation: 29735

You can specify which items within the Sortable are actually sortable. This should do the trick—change the HTML as follows:

<ul>
    <li class="line" id="header"><a href="#" class="drag">header (do not sort)</a></li>
    <li class="line"><a href="#" class="drag">line one</a></li>
    <li class="line"><a href="#" class="drag">line two</a></li>
</ul>

Then when you set up the sortable:

$('ul').sortable({ items: '> li[id!=header]' });

Upvotes: 17

Mladen Janjetovic
Mladen Janjetovic

Reputation: 14634

You can explicitly exclude items (aside by not including them):

$( ".sortable" ).sortable({
    cancel: ".disable-sort-item"
});

Upvotes: 7

Related Questions