Update

package.json

@@ -25,6 +25,7 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "nested-sort": "^5.2.0"
+    "nested-sort": "^5.2.0",
+    "sortablejs": "^1.15.2"
   }
 }

resources/js/filament-nested-list.js

@@ -1,4 +1,4 @@
-import NestedSort from 'nested-sort';
+/*import NestedSort from 'nested-sort';
 
 export default function nestedList({
                                        items = [],
@@ -41,4 +41,48 @@ export default function nestedList({
             this.$wire.updateNestedList(this.items)
         },
     }
-}
+}*/
+
+import Sortable from "sortablejs"
+
+export default function nestedList({
+                                       treeId,
+                                       id,
+                                       maxDepth
+                                   }) {
+    return {
+        id,
+        sortable: null,
+
+        init() {
+            let el = document.getElementById(id);
+            this.sortable = new Sortable(el, {
+                group: treeId,
+                animation: 150,
+                fallbackOnBody: true,
+                swapThreshold: 0.25,
+                invertSwap: true,
+                draggable: "[data-sortable-item]",
+                handle: "[data-sortable-handle]",
+                onMove: (evt) => {
+                    if (maxDepth && maxDepth >= 0 && this.getDepth(evt.related) > maxDepth) {
+                        return false;  // Prevent dragging items to a depth greater than maxDepth
+                    }
+                },
+                onSort: () => {
+                    console.log(this.sortable.toArray());
+                }
+            })
+        },
+
+        getDepth(el, depth = 0) {
+            const parentElement = el.parentElement.closest('[data-sortable-item]');
+
+            if (parentElement) {
+                return this.getDepth(parentElement, ++depth);
+            }
+
+            return depth;
+        },
+    }
+}

resources/views/components/nested-list/index.blade.php

@@ -1,23 +1,26 @@
 @php
     use Filament\Support\Facades\FilamentAsset;
+    use Illuminate\Support\Js;
     $containerKey = 'filament_tree_container_' . $this->getId();
     $maxDepth = $getMaxDepth() ?? -1;
-    ray($this->getNestedListData());
+    $data = collect($this->getRecords() ?? [])
+        ->map(function ($record) {
+            $data = [
+                'id' => $record->id,
+                'order' => $record->order,
+                'text' => $this->getNestedListRecordTitle($record),
+            ];
+            $parent = $this->getParentKey($record);
+            if ($parent > 0) {
+                $data['parent_id'] = $parent;
+            }
+            return $data;
+        })
+        ->toArray();
 @endphp
-
-<div x-data="{}"
-     x-load-css="[@js(FilamentAsset::getStyleHref('filament-nested-list', package: 'invaders-xx/filament-nested-list'))]"
->
+<div>
     <div wire:ignore
-         x-ignore
-         ax-load
-         ax-load-src="{{ FilamentAsset::getAlpineComponentSrc('filament-nested-list', 'invaders-xx/filament-nested-list') }}"
-         x-data="nestedList({
-             items: @js($this->getNestedListData()),
-             maxDepth: {{ $maxDepth }},
-             selector: '#nestedList'
-         })"
-    >
+         x-data="nestedList(JSON.parse('{{ json_encode($data) }}'), {{ $maxDepth }})">
         <x-filament::section :heading="($this->displayNestedListTitle() ?? false) ? $this->getNestedListTitle() : null">
             <menu class="mb-4 flex gap-2" id="nestable-menu">
                 <x-filament::button
@@ -35,4 +38,56 @@
             <div id="nestedList"></div>
         </x-filament::section>
     </div>
+    <form wire:submit.prevent="callMountedNestedListAction">
+        @php
+            $action = $this->getMountedNestedListAction();
+        @endphp
+
+        <x-filament::modal
+                :alignment="$action?->getModalAlignment()"
+                :close-button="$action?->hasModalCloseButton()"
+                :close-by-clicking-away="$action?->isModalClosedByClickingAway()"
+                :description="$action?->getModalDescription()"
+                display-classes="block"
+                :footer-actions="$action?->getVisibleModalFooterActions()"
+                :footer-actions-alignment="$action?->getModalFooterActionsAlignment()"
+                :heading="$action?->getModalHeading()"
+                :icon="$action?->getModalIcon()"
+                :icon-color="$action?->getModalIconColor()"
+                :id="$this->getId() . '-nested-list-action'"
+                :slide-over="$action?->isModalSlideOver()"
+                :sticky-footer="$action?->isModalFooterSticky()"
+                :sticky-header="$action?->isModalHeaderSticky()"
+                :visible="filled($action)"
+                :width="$action?->getModalWidth()"
+                :wire:key="$action ? $this->getId() . '.nested-list.actions.' . $action->getName() . '.modal' : null"
+                x-on:closed-form-component-action-modal.window="if (($event.detail.id === '{{ $this->getId() }}') && $wire.mountedNestedListActions.length) open()"
+                x-on:modal-closed.stop="
+    const mountedNestedListActionShouldOpenModal = {{ Js::from($action && $this->mountedNestedListActionShouldOpenModal()) }}
+
+    if (! mountedNestedListActionShouldOpenModal) {
+        return
+    }
+
+    if ($wire.mountedFormComponentActions.length) {
+        return
+    }
+
+    $wire.unmountNestedListAction(false)
+"
+                x-on:opened-form-component-action-modal.window="if ($event.detail.id === '{{ $this->getId() }}') close()"
+        >
+            @if ($action)
+                {{ $action->getModalContent() }}
+
+                @if (count(($infolist = $action->getInfolist())?->getComponents() ?? []))
+                    {{ $infolist }}
+                @elseif ($this->mountedNestedListActionHasForm())
+                    {{ $this->getMountedNestedListActionForm() }}
+                @endif
+
+                {{ $action->getModalContentFooter() }}
+            @endif
+        </x-filament::modal>
+    </form>
 </div>