jQuery dragable / sortable with nested list

Question

I have a page that contains a source list and three possible drop zones for the user to move an item to. Due to the source list growing in length, I want to break down the <li> 's into categories to make it more readable.

When doing so, my code is still applying the dragable to these nested <ul> items when I only want it to be the <li> itself.

<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>

This is how I have my lists set up.

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

Is there any easy way to have this nested setup, only allowing <li> items to be moved? Will it be more involved for the code to then have to know what <ul> it belongs to so it goes back there if dropped back into the source?

Just looking for some tips incase this is already part of a method/event for sortable/draggable that I am not aware of.

Fiddle: https://jsfiddle.net/d4Lf9v4o/1/

Answer 1

I make a simple example for let you understand the solution.

In Jquery UI sortable you can use a class for exclude that item from the sortable.

 $(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> 

Hope that help you.