Question

I’m using jquery sortable with ul and can move the 8 li items below around:

I’m want to limit this so only li items that have an img can be sorted (above first 3 items) however I’m finding the following can occurs (eg: can move the 3 images inbetween the non-image li’s):

I am using the following HTML structure (relates to above pic with class unsortable):

<ul id="photoPreviews>
<li class="unsortable">elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
<li>elements</li>
<li class="unsortable">elements</li>
</ul>

Current JQUERY using Cancel:

$('ul#photoPreviews').sortable({
  cancel: 'li.unsortable'    
});

All li elements start with the unsortable class (connected to .sortable() cancel) to start with and this class is removed when an image is added to the li. And I find I can’t sort those items with the unsortable class.

However i can still move the li items with an image inbetween the no image items.

Question: How can I limit it so only li items with an image can be move between each other – so in this example on the first 3 can change places with each other? Is there a way of grouping the sortable items?

thankyou

Answer 1

The ‘items’ option allows you to change which elements are sortable http://jqueryui.com/demos/sortable/#option-items

Example: http://jsfiddle.net/cjc343/55rzM/