Stop first draggable <li>

Question

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

How can I transfer the first <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"); } }); });​ 

Thank you very much.

Answer 1

You can use the items option in the widgets method .sortable() . Combined with the jQuery gt() selector, you can easily get what you are looking for.

This works for me ( jsFiddle example ):

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

Answer 2

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/

Answer 3

try it. http://jsfiddle.net/PeS2D/561/

I added an extra class with a title to the first li, and then the cancel function appeared

to save people with a click:

[Cancel] Prevents sorting if you start with elements matching the selector. Code examples: Initialize sorting with the specified undo option:

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

Get or set the cancel option after initialization:

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

Answer 4

Just read the documentation: http://api.jqueryui.com/sortable/#option-items

The items parameter allows you to specify a selector for sorting items.

Answer 5

Fiddle: http://jsfiddle.net/PeS2D/562/

You can configure it this way

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

then add id to your first li

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