jQueryはネストされたリストでドラッグ可能/ソート可能

Question

私はソースリストとアイテムを移動するための3つの可能なドロップゾーンを含むページを持っています。ソースリストの長さが伸びているので、私は<li>をカテゴリに分けて読みやすくしたいと思っています。

私のコードでは、<li>だけの場合は、これらのネストされた<ul>アイテムにドラッグ可能なアイテムが適用されています。

<ul id="in_available_fields" name="in_available_fields" class="sortable-list fixed-panel ui-sortable"> 
<ul> 
    <li>Some Category Name</li> 
    <li class="sortable-item allowPrimary allowSecondary allowExport" data-fid="2">Tool Name</li> 
</ul>  
<li class="sortable-item allowSecondary allowExport" data-fid="3">Tool Description</li> 
<li class="sortable-item allowPrimary allowSecondary allowExport" data-fid="4">Tool Type</li> 
</ul> 

これはリストの設定方法です。

$('#in_available_fields').sortable({ 
    connectWith: '.sortable-list', 
    placeholder: 'placeholder', 
    start: function(event, ui) { 
........ 

このネストされたセットアップ、唯一<li>アイテムを移動できるようにすることを持っている任意の簡単な方法はありますか？コードにはそれが属していることを知っている必要がありますので、ソースに戻すとそこに戻ってきますか？

これは、私が気付いていないソート可能/ドラッグ可能なメソッド/イベントの一部です。

フィドル：https://jsfiddle.net/d4Lf9v4o/1/

Answer 1

私はあなたが解決策を理解してみましょうするための簡単な例を作ります。

Jquery UIでソート可能な場合、そのアイテムをソート可能なものから除外するクラスを使用できます。

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

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> 
 

 
<ul class="sortable"> 
 
    <p class="cat">This is the category</p> 
 
    <li id="item_3">Item 3</li> 
 
    <li id="item_4">Item 4</li> 
 
    <li id="item_5">Item 5</li> 
 
</ul>

お手伝いを希望。