如何防止取消的项目掉落

Question

我有一个 li 的动态列表，但有时最后一个元素是可编辑的，有时则不是。

我希望所有项目都是 dragged/dropped 而不是可编辑的最后一个元素。 （注意：如果最后一个元素不可编辑，则应将其拖动）。

• 我创建了一个不像我的那样动态的缩小示例，但我只是想了解这个想法，以便我将在我的代码中使用这个想法。

当最后一个元素可编辑时，它会更改 id，这样我就可以通过它的 id 取消拖动。 问题是项目仍然是可拖放的，我的意思是在下面的示例中，项目 2 可以拖动到可编辑的项目 3。

<ul class="sortable">
    <li id="item_1">Item 1</li>
    <li id="item_2">Item 2</li>
    <li id="item_3_edit">Item 3 (Edit State)</p> 
</ul>

Javascript:

$(function() {
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
    $('.sortable').sortable({ cancel: '#item_3_edit' });
});

Fiddle

我该如何修复它，使项目 2 无法更改可编辑的项目 3。

Answer 1

试试这个

$(function() {


     $(".sortable").sortable({
      items: "li:not(#item_3_edit)"
    });
     $( ".sortable" ).disableSelection();
    });