CODEWITHSUNDEEP
htmljquery-ui
Adam
Adam

Reputation: 20882

Jquery Sortable + Some items of a <ul>

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

enter image description here

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):

enter image description here

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

Upvotes: 1

Views: 291

Answers (1)

cjc343
cjc343

Reputation: 3765

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

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

Upvotes: 1

Related Questions