Skip to content

fix: improve drag-and-drop scroll sensitivity in columns#103

Merged
ManukMinasyan merged 1 commit into4.xfrom
fix/drag-scroll-sensitivity
Apr 10, 2026
Merged

fix: improve drag-and-drop scroll sensitivity in columns#103
ManukMinasyan merged 1 commit into4.xfrom
fix/drag-scroll-sensitivity

Conversation

@ManukMinasyan
Copy link
Copy Markdown
Contributor

@ManukMinasyan ManukMinasyan commented Apr 10, 2026

Summary

  • Enhances SortableJS scroll configuration for column containers during drag-and-drop
  • Sets scrollSensitivity: 100 (from default 30), scrollSpeed: 15, and forceAutoScrollFallback: true
  • Makes dragging cards to off-screen positions (top/bottom of scrollable columns) significantly easier

Root Cause

Filament's x-sortable directive creates SortableJS instances without configuring forceAutoScrollFallback, which is needed for proper auto-scroll in nested overflow containers. The default scrollSensitivity of 30px was also too conservative for column-based kanban layouts.

Test plan

  • All 112 existing tests pass
  • Manual test: drag card to top of a scrolling column (off-screen) -- auto-scroll should trigger within ~100px of edge
  • Manual test: drag card to bottom of a scrolling column (off-screen) -- same behavior
  • Manual test: drag between columns still works as before

Closes #102

Enhance SortableJS configuration for column containers to make
dragging cards to off-screen positions (top/bottom of scrollable
columns) much easier. The default scroll sensitivity was too low
for nested overflow containers.

Closes #102
Copilot AI review requested due to automatic review settings April 10, 2026 08:03
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the drag-and-drop auto-scroll behavior for kanban columns by updating the underlying SortableJS scroll settings on Filament’s x-sortable containers, making it easier to drag cards to off-screen positions within scrollable columns.

Changes:

  • Add an Alpine helper (enhanceSortableScroll) to update SortableJS options for all [x-sortable] elements in the Flowforge component.
  • Invoke the helper on component initialization via $nextTick.
  • Rebuild the bundled Alpine component output.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
resources/js/flowforge.js Adds enhanceSortableScroll() and calls it on init to increase scroll sensitivity/speed and enable forceAutoScrollFallback.
resources/dist/flowforge.js Updates the compiled/minified distribution build to include the new behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ManukMinasyan ManukMinasyan merged commit e5495a9 into 4.x Apr 10, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Drag and Drop in a column very difficult

3 participants