jQueryのUI選択：私は、ユーザーがdragingによって、リストから項目を選択することを可能にするリストを作成するためにjqueryのUIの選択を使用しています

Question

特定の項目を無効にする方法。私がやろうとしています何

DEMO

$(document).ready(function() { 
 
    $("ul").selectable({ 
 
    filter: "li:not(.blocked)", // Filtering booked hours 
 
    selecting: function(event, ui) { 
 
     $(".ui-selecting:last-of-type").nextAll().addClass('blocked') 
 
    } 
 
    }); 
 
});

li { 
 
    border: 1px solid tomato; 
 
} 
 

 
.ui-selecting { 
 
    background: blue; 
 
} 
 

 
.ui-selected { 
 
    background: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li class="blocked">3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</ul>

ユーザーは、彼が.blocked以下の項目を選択することが許されるべきではない.blocked項目の上の項目を選択する場合です。また、ユーザーが.blockedアイテムの下にあるアイテムを選択している場合は、.blocked以上のアイテムを選択することはできません。私はこれを次の行のコードを追加しようとしましたが、うまくいきません。

selecting: function(event, ui) { 
    $(".ui-selecting:last-of-type").nextAll().addClass('blocked') 
} 

この場合、正しい方法はありますか？

Answer 1

私は

... 
selecting: function(event, ui) { 
    if ($('.ui-selecting:last').next().hasClass('blocked')) { 
     $('.ui-selecting:last').nextAll().not('.blocked').addClass('prevented').removeClass('ui-selected'); 
    } 
    if ($('.ui-selecting:first').prev().hasClass('blocked')) { 
     $('.ui-selecting:first').prevAll().not('.blocked').addClass('prevented').removeClass('ui-selected'); 
    } 
} 
... 

以下のように自分の質問を解決し