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

Question

我有一个列表，一些带有“排序”类的项目：

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

然后，我将列表初始化为可对所有具有“排序”类的项目进行排序。

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

这很好用，但是，我希望能够修复可排序项目的位置，以便它们不再被拖动。我首先添加了一个按钮以从列表项中删除“排序”类。这是按钮的代码：

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

这确实可以防止其他项目将其用作放置目标，但该项目仍然可以自行拖动。见 JS FIDDLE：http://jsfiddle.net/3Js5u/1/

我也尝试过刷新列表：

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

但这似乎不起作用。

我能想到的唯一其他选择是销毁可排序列表并像这样重新创建它：

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

该选项的 JS FIDDLE：http://jsfiddle.net/3Js5u/3/。不确定这是否是最好的方法。任何帮助表示赞赏。谢谢。

Answer 1

相反，使用cancel 选项。

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();
});

演示： http://jsfiddle.net/3Js5u/2/