Nesting Sortable Controllers

[AlexKeyCodes]

Nesting sortable lists is causing the parent list to no longer be sortable, by this I mean the parent items are no longer able to drag and drop, and no data is being sent to the server. The child list works as expected though.

Nesting works so long as the child list is not inside of a sortable item. So in the example below, if the nested sortable div is moved outside of the parent div (a sortable item) then sorting works for both parent and child. Hopefully that makes sense.

If this is intentional, is there a work around to allow this html structure and have both parent and child lists be sortable?

<div data-controller="sortable" data-sortable-animation-value="150" data-sortable-resource-name-value="delivery_menu" data-sortable-param-name-value="sort">
  <% menus.each_with_index do |menu, i| %>
    <div data-sortable-update-url="<%= reorder_restaurant_settings_online_orders_menu_path(menu) %>">
      <h2>
        <%= menu.name %>
      </h2>
      <div data-controller="sortable" data-sortable-animation-value="150" data-sortable-resource-name-value="delivery_menu_item" data-sortable-param-name-value="sort">
        <% menu.menu_items.order(:sort).each do |menu_item| %>
          <%= link_to menu_item.name,
                      edit_restaurant_settings_online_orders_menu_meal_path(menu_item, menu_id: menu.id),
                      remote: true,
                      data: { sortable_update_url: reorder_restaurant_settings_online_orders_menu_meal_path(menu, menu_item) } %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

EDIT: Here is the same scenario but easier to read and copy/pastable.

<div data-controller="sortable">
  <div>
    <h1>
      Parent 1
    </h1>
    <ul data-controller="sortable">
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </div>
  <div>
    <h1>
      Parent 2
    </h1>
    <ul data-controller="sortable">
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </div>
  <div>
    <h1>
      Parent 3
    </h1>
    <ul data-controller="sortable">
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </div>
</div>