如何防止取消项目的下降

时间:2016-09-08 22:26:57

标签: javascript jquery html jquery-ui draggable

我有一个li的动态列表,而有时最后一个元素是可编辑的,有时它不是。

我希望在可编辑时拖放所有项目而不是最后一个元素。 (注意:如果最后一个元素不可编辑,那么应该拖动它。)

  • 我创建了一个缩小的例子,它不是我的动态,但我只是想得到这个想法,所以我将在我的代码中使用这个想法。

当最后一个元素可编辑时,它会更改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。

1 个答案:

答案 0 :(得分:1)

试试这个

$(function() {


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