Question

I don’t want to sort all div inside main div but unable to handle the situation.
My html:

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="">Home</div>
        <div id = "draggable2" class="">Contact Us</div>
        <div id = "draggable3" class="">FAQs</div>
        <div id = "draggable4" class="Test">Test</div>
    </div>
</div>​

and in jquery:

$("#sortable").not('#draggable4').sortable({
    //revert: true
}); ​

Sample: http://jsfiddle.net/shree/sP3UZ/2193/

But I am unable to stop sorting 4th div.Is this possible?Thanks.

Answer 1

Use the items property of draggable to exclude the fourth div. Try this:

$("#sortable").sortable({
    items: ":not(#draggable4)"
}); 

Example fiddle

Better yet would be to exclude by class, eg .notdraggable, and you can then reuse this system throughout your site.