8000 Fix: dropping item alignment by dominon12 · Pull Request #2167 · react-grid-layout/react-grid-layout · GitHub
[go: up one dir, main page]
Skip to content

Fix: dropping item alignment #2167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix: dropping item alignment #2167

wants to merge 3 commits into from

Conversation

dominon12
Copy link

Description

This PR improves the drag-from-outside behavior to deliver a more intuitive and consistent user experience.

Problem Statement

Currently, the library treats the cursor as the top-left corner of the dragged item. This causes the placeholder to always appear below and to the right of the cursor, making interactions feel inaccurate. The problem becomes more noticeable with larger items, where the gap between cursor and placeholder is especially distracting.

Comparison of Solutions

Current behavior (cursor = top-left corner):

  • Creates a visible offset between cursor and placeholder
  • Feels unresponsive, especially with large items
  • Makes placement difficult to predict
Current.behavior.mov

Base PR #2072 (cursor = center):

  • Centers placeholder on cursor for clearer feedback
  • Solves the primary misalignment issue identified by @michaelnesen
  • Improves usability but does not reflect how users naturally drag items
Centered.cursor.mov

Our enhanced solution (cursor offset awareness):

  • Preserves the exact cursor offset within the dragged element
  • Maintains the natural relationship between cursor and item
  • Provides the most accurate, predictable, and intuitive drag experience
  • Builds directly on the solid foundation of PR #2072
Cursor.offset.awareness.mov

Benefits of Cursor Offset Awareness

  • Natural interaction model: Mirrors native drag-and-drop behavior across platforms.
  • Improved precision: Preserves the point where the user actually grabbed the item (e.g., top-right corner).
  • Accessibility: Offers consistent and predictable movement, especially helpful for users with motor impairments.
  • Lower cognitive load: Users don’t need to mentally adjust for shifting positions - dragging simply works as expected.

Proven in Production

This cursor-offset approach has been used in production in a key feature of a big multinational SaaS for nearly a year. It has proven reliable, delivering a smooth user experience without generating related support tickets - evidence of its stability and effectiveness.

Why Merge This

This enhancement is the natural evolution of PR #2072. It not only resolves the placeholder misalignment but also elevates usability to match real-world user expectations. With demonstrated community interest and production validation, this solution offers the most solid and future-proof approach for drag-from-outside positioning.

What type of PR is this? (check all applicable)

  • 🍕 Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 🎨 Style
  • 🧑‍💻 Code Refactor
  • 🔥 Performance Improvements
  • ✅ Test
  • 🤖 Build
  • 🔁 CI
  • 📦 Chore (Release)
  • ⏩ Revert

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

  • 👍 yes
  • 🙅 no, because they aren't needed
  • 🙋 no, because I need help

Added to documentation?

  • 📜 README.md
  • 📓 examples
  • 🙅 no documentation needed

@github-actions github-actions bot added core use this label for changes in `lib` directory tests use this label for changes in tests labels Sep 22, 2025
@dominon12 dominon12 changed the title Fix/dropping item aligment Fix dropping item aligment Sep 22, 2025
@dominon12 dominon12 changed the title Fix dropping item aligment Fix: dropping item alignment Sep 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
core use this label for changes in `lib` directory tests use this label for changes in tests
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@dominon12 @michaelnesen
0