Tutorial :jQuery: cancel sortable on top-most LI element?


I have two sortables that are straight UL elements, each with at least on LI element and as many as ten, sorted like so:

$(".sortable").sortable({      connectWith: ".sortable",      cancel: '.no-drag',  }).disableSelection();  

I want each UL to have a top-most LI element reading 'Title'. I don't want this LI element to be draggable, and I don't want it to be sortable; it's effectively a header block for the UL. The 'cancel' option in the sortable() call DOES prohibit the user from dragging it around, but the user can still drag other LI elements in the list up and down, dislodging the top-most LI. I want to prevent this.

Essentially: I want LI items 2-N to be sortable, and 1 fixed.



I don't see a problem with the solution you've already come up with, but I figured I'd mention that using a combination of the ":not" and ":first" selectors you can more directly get the desired result you're looking for:

$(".sortable").sortable({      connectWith: ".sortable",      cancel: '.no-drag',      items: 'li:not(:first)'  });  

Alternately, you could use the "gt" selector to specify all list items of a greater index than 0:

$(".sortable").sortable({      connectWith: ".sortable",      cancel: '.no-drag',      items: 'li:gt(0)'  });  

I'm sure there are plenty other ways of going about it as well.


Well, a little perseverance woulda helped. Just changed the sortable call to look like so:

$(".sortable").sortable({      connectWith: ".sortable",      cancel: '.no-drag',      items: '.sortable-item'  });  

Then gave each LI that I wanted sorted a 'sortable-item' class. Voila.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »