How to prevent drop on canceled item

Question

I have a dynamic list of li whereas sometimes the last element is editable and sometimes it is not.

I want all items to be dragged/dropped instead of the last element when it is editable. (Note: if the last element is not editable then it should be dragged).

• I created a minified example which is not dynamic as mine but I just want to get the idea, so that I will use the idea in mine code.

When the last element is editable it changes the id, so that I can cancel the drag by its id. The problem is that the item is still droppable, I mean that in the example below, Item 2 can be dragged to the editable Item 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

How can I fix it so that Item 2 wont be able change the editable Item 3.

Answer 1

Try this out

$(function() {


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