feat: add drag-to-reorder for kanban and task-list views#1619
Open
ac8318740 wants to merge 3 commits intocallumalpass:mainfrom
Open
feat: add drag-to-reorder for kanban and task-list views#1619ac8318740 wants to merge 3 commits intocallumalpass:mainfrom
ac8318740 wants to merge 3 commits intocallumalpass:mainfrom
Conversation
Implement card-level drag-and-drop reordering within kanban columns. Dragging a card above or below another card computes a new sort_order using a midpoint insertion algorithm and writes it to frontmatter. New capabilities: - Card-level dragover/drop handlers with top/bottom half detection - Visual drop indicators (accent-colored bar above or below target) - Midpoint insertion: new_value = floor((neighbor_above + neighbor_below) / 2) - Vault-wide neighbor lookup so filtered/hidden tasks are still considered when computing midpoints (prevents order collisions) - Proportional gap computation based on median spacing in the column - Collision handling: when neighbors share identical sort_order values, renumber all column tasks evenly across the existing value range - Deferred re-render during drag to prevent DOM destruction mid-drop - Same-column detection to skip unnecessary group property writes Supporting changes: - Add sortOrder field to TaskInfo interface and FieldMapping - Add sort_order to FieldMapper read/write and default field mapping - Add columnTasksCache for render-time group data - Add sort_order to e2e vault kanban view config - Add CSS for drop-above/drop-below position indicators
Extract sort_order computation from KanbanView into sortOrderUtils.ts as free functions (computeSortOrder, getGroupTasks, renumberAndInsert, isSortOrderInSortConfig, stripPropertyPrefix) so both views share the same midpoint insertion algorithm without code duplication. Add drag-to-reorder to TaskListView: - Container-level drag event delegation (dragenter/dragover/drop) with unconditional e.preventDefault() as required by the HTML5 DnD spec - Within-group reordering: cards get draggable="true" when sort_order is in the view's sort config - Cross-group dragging: detects group changes via a taskGroupKeys map (populated at render time) and updates the group property via TaskService.updateProperty alongside the sort_order write - Deferred re-render during drag to prevent DOM destruction mid-drop - Works in both flat and grouped modes; gracefully skipped in virtual scrolling paths Simplify .task-card--dragging CSS: remove rotate/scale transforms and pointer-events:none that caused adjacent cards to steal hit-test events during drag. Add drop indicator pseudo-elements (::before/::after) for visual feedback in task-list-view.css.
…ttings The drag-to-reorder feature hardcoded "sort_order" as the frontmatter property name. This wires it through the existing FieldMapping system so users can customise it in Settings > Task Properties, just like every other property. - sortOrderUtils: replace 3 hardcoded "sort_order" references with plugin.settings.fieldMapping.sortOrder - isSortOrderInSortConfig: accept sortOrderField param so the sort config check uses the mapped name - TaskListView / KanbanView: pass the mapped field name to all isSortOrderInSortConfig calls - taskPropertiesTab: add Sort Order property card in Metadata section - en.ts: add translation keys for the new settings card Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Owner
|
Thanks so much for pushing this, @ac8318740 ! I’ve been interested drag-to-reorder in TaskNotes for a long time (see issues #186 , #219 , #621, #701) and hadn’t been brave enough to tackle it myself. This gets close and the direction is strong. After testing in my vault, I’m seeing a few blocking robustness issues:
My suggestion for the next iteration: switch the ordering model to LexoRank (string ranks) and make DnD placement strictly swimlane-aware when swimlanes are enabled. This will require a lot of manual testing. I’d prioritize robustness over minimal complexity here, because this feature will get heavy use once merged. Thank you for doing the hard part of getting this moving! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds drag-to-reorder for both kanban and task-list views using a
sort_orderfrontmatter property.The point of this is to let you prioritize tasks within a priority group, e.g. ordering your three "high" priority tasks in the sequence you actually want to do them. This is groundwork for auto-scheduling: once tasks have a stable intra-group ordering, a scheduler can slot them into time blocks without the user having to re-specify intent.
What's included
sort_orderand the group property)sortOrderUtils.ts: extracted free functions (computeSortOrder,getGroupTasks,renumberAndInsert, etc.) so both views use the same algorithmsortOrderfield inTaskInfo, default field mapping, read/write supportsort_order)Configurable sort order property
The sort order property name is wired through the existing
FieldMappingsystem, the same system used by every other property (status, priority, due, etc.). This means:sort_order, so existing users are unaffectedDesign notes
new_value = floor((above + below) / 2)gives O(1) placement without rewriting the whole listTest plan