Почему мое меню перетаскивания не работает? ⇐ Javascript

[Anonymous]

Я строю менеджер меню администратора с Laravel Livewire и SortableJS. Пользовательский интерфейс перетаскивания работает отлично, но я не могу переделать меню и вложенного подменю визуально. Метод LiveWire UpdateMenUorder запускается при перетаскивании с сериализованной структурой меню. < /P>
Меню верхнего уровня не загружают упорядоченные, и отношения детей не нагружены порядком по порядку.
Menu Items (Drag and Drop to reorder)

• @foreach ($menuItems as $menu)
• id }}" class="mb-2 border p-2 rounded bg-gray-100">
  
  {{ $menu->title }}
  ×
  
  @if ($menu->children->count())
  
  @foreach ($menu->children as $child)
  
  
  {{ $child->title }}
  ×
  
  @endforeach

@endif

@endforeach



< /code>
И вот мой js < /p>
@push('scripts')


document.addEventListener('livewire:load', function () {
let menuList = document.getElementById('menu-list');

new Sortable(menuList, {
animation: 150,
handle: '.handle', // this matches your
onEnd: function (evt) {
let order = serializeMenu(menuList);
Livewire.emit('updateMenuOrder', order);
}
});

// Initialize sortable on all child ULs (if you want nested drag & drop)
menuList.querySelectorAll('ul').forEach(function(childUl) {
new Sortable(childUl, {
group: 'nested',
animation: 150,
handle: '.handle',
onEnd: function (evt) {
let order = serializeMenu(menuList);
Livewire.emit('updateMenuOrder', order);
}
});
});
});

function serializeMenu(el) {
let items = [];
el.querySelectorAll(':scope > li').forEach((li, index) => {
let item = {
id: li.getAttribute('data-id'),
order: index + 1,
children: []
};

let childUl = li.querySelector('ul');
if (childUl) {
item.children = serializeMenu(childUl);
}

items.push(item);
});
return items;
}


@endpush
< /code>
Компонент меню меню здесь < /p>
public function loadMenu()
{
$this->menuItems = Menu::whereNull('parent_id')->with('children')->orderBy('order')->get();
}
< /code>
#[On('updateMenuOrder')]
public function updateMenuOrder(array $structure)
{
\Log::info('updateMenuOrder called with:', $structure);

$this->updateMenuHierarchy($structure);

$this->loadMenu();

}

// Recursive update of order and parent_id
public function updateMenuHierarchy(array $items, $parentId = null)
{
foreach ($items as $index => $item) {
Menu::where('id', $item['id'])->update([
'parent_id' => $parentId,
'order' => $index
]);

if (!empty($item['children'])) {
$this->updateMenuHierarchy($item['children'], $item['id']);
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... ot-working