javascript - 如何停止在 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>

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

$("#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/