如何在jQuery UI可排序列表中停止可排序的项目？

Question

I have a list, some items with a class "sort":

<ul id="items">
   <li class="sort">ITEM 1 <a href="#" class="fix-position">Fix Position</a></li>
   <li class="sort">ITEM 2 <a href="#" class="fix-position">Fix Position</a></li>
   <li class="sort">ITEM 3 <a href="#" class="fix-position">Fix Position</a></li>
   <li class="sort">ITEM 4 <a href="#" class="fix-position">Fix Position</a></li>
   <li>ITEM 5</li>
   <li>ITEM 6</li>
   <li>ITEM 7</li>
   <li>ITEM 8</li>
</ul>

I have then initialised the list as sortable for all items with the class "sort".

$("#items").sortable({
    items: "li.sort"
});

This works fine, however, I want to be able to fix the position of the sortable items so that they can no longer be dragged. I've started by adding a button to remove the class "sort" from the list item. This is the code for the button:

$("#items").on("click", ".fix-position", function(e){
    e.preventDefault();        
    $(this).parent().removeClass("sort");
    $(this).remove();
});

This does prevent the other items from using it as a drop target, but the item can still be dragged itself. See JS FIDDLE: http://jsfiddle.net/3Js5u/1/

I have also tried to refresh the list:

$("#items").sortable("refresh");

but that does not seem to work.

Only other option I can think of is to destroy the sortable list and recreate it like this:

$("#items").sortable( "destroy" );
$("#items").sortable({
    items: "li.sort"
});

JS FIDDLE for that option: http://jsfiddle.net/3Js5u/3/ . Not sure if that's the best way to go though. Any help appreciated. Thanks.

Answer 1

Do the opposite and use cancel option instead.

HTML:

<ul id="items">
    <li>ITEM 1 <a href="#" class="fix-position">Fix Position</a></li>
    <li>ITEM 2 <a href="#" class="fix-position">Fix Position</a></li>
    <li>ITEM 3 <a href="#" class="fix-position">Fix Position</a></li>
    <li>ITEM 4 <a href="#" class="fix-position">Fix Position</a></li>
    <li class="static">ITEM 5</li>
    <li class="static">ITEM 6</li>
    <li class="static">ITEM 7</li>
    <li class="static">ITEM 8</li>
</ul>

JavaScript:

$("#items").sortable({
    cancel: ".static"
});

$("#items").on("click", ".fix-position", function(e) {
    $(this).parent().addClass("static").end().remove();
    e.preventDefault();
});

DEMO: http://jsfiddle.net/3Js5u/2/