jQuery UI /ソート可能でアイテムを送信できるようにするにはどうすればいいですか？

Question

私はいくつかのjQuery UIのソート可能なリストを持っており、アイテムをあるリストから別のリストに移動したいと考えています。 1つのブロックされたリストを除いて：これは他のリストからアイテムを受け取ることができるはずですが、このリスト内のアイテムは移動しようとしても反応しません。これは可能ですか？どうやって？私は開始イベントで（「キャンセル」）.sortable使用しようとしたが、これは動作しないようです...

はこちらをご覧ください、第二のリストには、1を「ブロック」する必要があります。http://jsfiddle.net/r1rffht7/

$(function() { 
    $(".sortable_list").sortable({ 
    connectWith: ".connectedSortable",    
    }).disableSelection(); 
}); 

Answer 1

注：あなた​​CLASが含まれていることを確認します

あなたはこのUpdated Fiddleをそうようcancelセレクタを使用してjQueryの-UI sortable機能を更新（または見ることができますsのblocked_list divにあります

$(function() { 
 
    $(".sortable_list").sortable({ 
 
    connectWith: ".connectedSortable", 
 
    cancel: ".blockedList" 
 
    }).disableSelection(); 
 
});

.blockedList { 
 
    border: 1px solid #f00 !important; 
 
} 
 

 
.sortable_list, 
 
.blockedList { 
 
    border: 1px solid #eee; 
 
    width: 142px; 
 
    min-height: 20px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 0 0 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.sortable_list li, 
 
.sortable_list .li, 
 
.blockedList li { 
 
    margin: 0 5px 5px 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 120px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> 
 

 
<h3>Conected lists : You can move items between any list</h3> 
 
<ul id="sortable1" class="sortable_list connectedSortable"> 
 
    <li class="ui-state-default">List 1 - Item 1</li> 
 
    <li class="ui-state-default">List 1 - Item 2</li> 
 
    <li class="ui-state-default">List 1 - Item 3</li> 
 
    <li class="ui-state-default">List 1 - Item 4</li> 
 
    <li class="ui-state-default">List 1 - Item 5</li> 
 
</ul> 
 

 
<ul id="sortable2" class="sortable_list blockedList connectedSortable"> 
 
    <li class="ui-state-highlight">List 2 - Item 1</li> 
 
    <li class="ui-state-highlight">List 2 - Item 2</li> 
 
    <li class="ui-state-highlight">List 2 - Item 3</li> 
 
    <li class="ui-state-highlight">List 2 - Item 4</li> 
 
    <li class="ui-state-highlight">List 2 - Item 5</li> 
 
</ul> 
 

 
<ul id="sortable3" class="sortable_list connectedSortable"> 
 
    <li class="ui-state-default">List 3 - Item 1</li> 
 
    <li class="ui-state-default">List 3 - Item 2</li> 
 
    <li class="ui-state-default">List 3 - Item 3</li> 
 
    <li class="ui-state-default">List 3 - Item 4</li> 
 
    <li class="ui-state-default">List 3 - Item 5</li> 
 
</ul> 
 

 
<ul id="sortable4" class="sortable_list connectedSortable"> 
 
    <li class="ui-state-highlight">List 4 - Item 1</li> 
 
    <li class="ui-state-highlight">List 4 - Item 2</li> 
 
    <li class="ui-state-highlight">List 4 - Item 3</li> 
 
    <li class="ui-state-highlight">List 4 - Item 4</li> 
 
    <li class="ui-state-highlight">List 4 - Item 5</li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>