fix: correct top-drop position to stay at top (#110)

Dragging a card to the very top of a column made it snap to the bottom.
All other drop positions worked.

Root cause: Filament's shared x-sortable directive wraps SortableJS and
re-inserts the dragged node after items[newDraggableIndex - 1] to work
around filamentphp/filament#17402. That branch is skipped when
newDraggableIndex === 0, so SortableJS's stale DOM leaks through on top
drops. flowforge's handleSortableEnd then read neighbors from
event.to.sortable.toArray(), which was still in the old order — producing
a payload of (afterCardId = old previous, beforeCardId = null), which the
backend correctly interprets as "append to bottom".

Fix: extend the insertBefore workaround to newDraggableIndex === 0, then
derive neighbors from the normalized DOM (querySelectorAll scoped to
parentNode) rather than sortable.toArray(). The backend position math
was already correct — confirmed by the new feature test that calls
moveCard with a realistic multi-card column and asserts the moved card
ends up at the top.

Closes #110

Author: ManukMinasyan

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Dragging a card to the top of a column no longer snaps it to the bottom. Extended the SortableJS top-drop workaround so the DOM is normalized before neighbors are read, and switched to reading them from the DOM directly rather than the stale internal sortable array (#110)
+
 ## v4.0.9 - 2026-04-10
 
 ### Fixed

resources/dist/flowforge.js

@@ -26,35 +26,49 @@ export default function flowforge({state}) {
         },
 
         handleSortableEnd(event) {
-            const newOrder = event.to.sortable.toArray();
-            let cardId = event.item.getAttribute('x-sortable-item');
+            const draggedNode = event.item;
+            const parentNode = event.to;
+            const newDraggableIndex = event.newDraggableIndex;
+
+            // Filament's shared x-sortable directive re-inserts the dragged node
+            // after items[newDraggableIndex - 1] to work around filamentphp/filament#17402,
+            // but that branch is skipped when newDraggableIndex === 0 — leaving the
+            // DOM stale on top drops. Extend the workaround so the top position is
+            // normalized before we read neighbors.
+            if (newDraggableIndex === 0) {
+                const firstItem = parentNode.querySelector(':scope > [x-sortable-item]');
+                if (firstItem && firstItem !== draggedNode) {
+                    parentNode.insertBefore(draggedNode, firstItem);
+                }
+            }
 
-            // Fallback to data-card-id if x-sortable-item is missing (edge case safety)
+            let cardId = draggedNode.getAttribute('x-sortable-item')
+                || draggedNode.getAttribute('data-card-id');
             if (!cardId) {
-                cardId = event.item.getAttribute('data-card-id');
-                if (!cardId) {
-                    console.error('Flowforge: Could not determine card ID for move operation');
-                    return;
-                }
+                console.error('Flowforge: Could not determine card ID for move operation');
+                return;
             }
 
-            const targetColumn = event.to.getAttribute('data-column-id');
+            const targetColumn = parentNode.getAttribute('data-column-id');
             if (!targetColumn) {
                 console.error('Flowforge: Target column ID is missing');
                 return;
             }
 
-            const cardElement = event.item;
-
-            this.setCardState(cardElement, true);
+            // Derive neighbors from the normalized DOM rather than sortable.toArray(),
+            // which can return stale order when SortableJS leaves the DOM out of sync.
+            const items = parentNode.querySelectorAll(':scope > [x-sortable-item]');
+            const index = Array.prototype.indexOf.call(items, draggedNode);
+            const afterCardId = index > 0 ? items[index - 1].getAttribute('x-sortable-item') : null;
+            const beforeCardId = index >= 0 && index < items.length - 1
+                ? items[index + 1].getAttribute('x-sortable-item')
+                : null;
 
-            const cardIndex = newOrder.indexOf(cardId);
-            const afterCardId = cardIndex > 0 ? newOrder[cardIndex - 1] : null;
-            const beforeCardId = cardIndex < newOrder.length - 1 ? newOrder[cardIndex + 1] : null;
+            this.setCardState(draggedNode, true);
 
             this.$wire.moveCard(cardId, targetColumn, afterCardId, beforeCardId)
-                .then(() => this.setCardState(cardElement, false))
-                .catch(() => this.setCardState(cardElement, false));
+                .then(() => this.setCardState(draggedNode, false))
+                .catch(() => this.setCardState(draggedNode, false));
         },
 
         setCardState(cardElement, disabled) {

resources/js/flowforge.js

@@ -66,6 +66,30 @@
             ->and((float) $movedTask->order_position)->toBeLessThan(65535);
     });
 
+    test('dragging last card to top places it above first card (regression for #110)', function () {
+        $first = Task::factory()->inProgress()->withPosition('65535.0000000000')->create(['title' => 'First']);
+        $second = Task::factory()->inProgress()->withPosition('131070.0000000000')->create(['title' => 'Second']);
+        $third = Task::factory()->inProgress()->withPosition('196605.0000000000')->create(['title' => 'Third']);
+        $last = Task::factory()->inProgress()->withPosition('262140.0000000000')->create(['title' => 'Last']);
+
+        Livewire::test(TestBoard::class)
+            ->call('moveCard', (string) $last->id, 'in_progress', null, (string) $first->id);
+
+        $movedTask = $last->fresh();
+        expect((float) $movedTask->order_position)->toBeLessThan((float) $first->order_position);
+
+        $orderedIds = Task::where('status', 'in_progress')
+            ->orderBy('order_position')
+            ->pluck('id')
+            ->map(fn ($id) => (string) $id)
+            ->toArray();
+
+        expect($orderedIds[0])->toBe((string) $last->id)
+            ->and($orderedIds[1])->toBe((string) $first->id)
+            ->and($orderedIds[2])->toBe((string) $second->id)
+            ->and($orderedIds[3])->toBe((string) $third->id);
+    });
+
     test('moves card to bottom of column', function () {
         $existingTask = Task::factory()->inProgress()->withPosition('65535.0000000000')->create();
         $taskToMove = Task::factory()->todo()->withPosition('65535.0000000000')->create();