Question

我有一个列表，一些带有类的项目＆＃34; sort＆＃34;：

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

然后我已经将列表初始化为可排序的所有项目，使用类＆＃34;排序＆＃34;。

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

这很好，但是，我希望能够修复可排序项目的位置，以便不再拖动它们。我已经开始添加一个按钮来删除课程＆＃34; sort＆＃34;从列表项。这是按钮的代码：

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

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

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

1 个答案: