fix(sort): Resolve drag-to-reorder conflicts with text inputs and improve UX #284 #285

Merged

imAsparky merged 2 commits from issue-284 into main

2025-10-23 09:13:25 +00:00

imAsparky commented

2025-10-23 08:08:24 +00:00

(Migrated from github.com)

Fix text content being inserted into nearby textareas during tag drag operations
- Added setData callback to clear text transfer data
- Prevents browser from treating drag as text copy operation
Fix tag order not persisting after drag-drop
- Switched from onEnd to onUpdate callback to prevent DOM conflicts
- SortableJS and Alpine.js reactivity were fighting over DOM mutations
- Added _isReordering flag to prevent double-firing of reorder events
- Let Alpine handle DOM rendering based on data changes
Improve drag-and-drop visual feedback
- Added grab/grabbing cursor states for better UX
- Updated .tm-tag-pill with cursor: grab on hover
- Added cursor: grabbing during active drag
- Applied cursor states to Sortable CSS classes (sortable-ghost, sortable-chosen, sortable-drag)
Follow SortableJS best practices
- Minimal configuration with standard ghostClass, chosenClass, dragClass
- Proper integration with Alpine.js reactive framework
- Added user-select: none to prevent text selection during drag

Closes #284

- Fix text content being inserted into nearby textareas during tag drag operations * Added setData callback to clear text transfer data * Prevents browser from treating drag as text copy operation - Fix tag order not persisting after drag-drop * Switched from onEnd to onUpdate callback to prevent DOM conflicts * SortableJS and Alpine.js reactivity were fighting over DOM mutations * Added _isReordering flag to prevent double-firing of reorder events * Let Alpine handle DOM rendering based on data changes - Improve drag-and-drop visual feedback * Added grab/grabbing cursor states for better UX * Updated .tm-tag-pill with cursor: grab on hover * Added cursor: grabbing during active drag * Applied cursor states to Sortable CSS classes (sortable-ghost, sortable-chosen, sortable-drag) - Follow SortableJS best practices * Minimal configuration with standard ghostClass, chosenClass, dragClass * Proper integration with Alpine.js reactive framework * Added user-select: none to prevent text selection during drag Closes #284

github-actions[bot] commented

2025-10-23 08:10:04 +00:00

(Migrated from github.com)

Code Coverage Report

Summary

Overall Coverage: 70.4%
Minimum Required: 50%
Status: ✅ PASSED

Report generated on 2025-10-23 08:10:04 UTC

Package Details

Package	Coverage
tag_me.utils	🟢 86.1%
tag_me.views	🟢 72.5%
tag_me.models	🟢 65.2%
tag_me.templatetags	🟢 63.4%
tag_me.forms	🟢 60.8%
tag_me	🟢 59.2%

# Code Coverage Report ![Code Coverage](https://img.shields.io/badge/coverage-70.4%25-yellow) ## Summary - **Overall Coverage**: 70.4% - **Minimum Required**: 50% - **Status**: ✅ PASSED *Report generated on 2025-10-23 08:10:04 UTC* ## Package Details | Package | Coverage | |---------|-----------| | tag_me.utils | 🟢 86.1% | | tag_me.views | 🟢 72.5% | | tag_me.models | 🟢 65.2% | | tag_me.templatetags | 🟢 63.4% | | tag_me.forms | 🟢 60.8% | | tag_me | 🟢 59.2% |

github-actions[bot] commented

2025-10-23 08:48:02 +00:00

(Migrated from github.com)

Code Coverage Report

Summary

Overall Coverage: 70.4%
Minimum Required: 50%
Status: ✅ PASSED

Report generated on 2025-10-23 08:48:02 UTC

Package Details

Package	Coverage
tag_me.utils	🟢 86.1%
tag_me.views	🟢 72.5%
tag_me.models	🟢 65.2%
tag_me.templatetags	🟢 63.4%
tag_me.forms	🟢 60.8%
tag_me	🟢 59.2%

# Code Coverage Report ![Code Coverage](https://img.shields.io/badge/coverage-70.4%25-yellow) ## Summary - **Overall Coverage**: 70.4% - **Minimum Required**: 50% - **Status**: ✅ PASSED *Report generated on 2025-10-23 08:48:02 UTC* ## Package Details | Package | Coverage | |---------|-----------| | tag_me.utils | 🟢 86.1% | | tag_me.views | 🟢 72.5% | | tag_me.models | 🟢 65.2% | | tag_me.templatetags | 🟢 63.4% | | tag_me.forms | 🟢 60.8% | | tag_me | 🟢 59.2% |