Skip to content

Conversation

@brianjhanson
Copy link
Contributor

@brianjhanson brianjhanson commented Nov 4, 2025

Optimizes DragSort.js for situations with large datasets.

  1. Pre-calculate all item midpoints at drag start
  2. Only check items within the viewport (with 300px buffer)
  3. Only recalculate the midpoint for the moved item and neighbors

This code was written a good while ago and performance optimizations
aren't my strong suite, so I worked with Claude Code to
digest the code and offer some suggestions### Description

Before

CleanShot.2025-11-04.at.10.21.23.mp4

After

CleanShot.2025-11-04.at.10.20.19.mp4

Fixes #17956

Implements three key optimizations to eliminate layout thrashing and
improve drag performance from 5-20fps to smooth 60fps:

1. Pre-calculate all item midpoints at drag start
2. Only check items within the viewport (with 300px buffer)
3. Only recalculate the midpoint for the moved item and neighbors

This code was writting a good while ago and performance optimizations
aren't necesarily my strong suite, so I worked with Claude Code to
digest the code and offer some suggestions
@brandonkelly
Copy link
Member

@brianjhanson Can you look through all Garnish.DragSort, Craft.ElementTableSorter, and Craft.DataTableSorter usages and make sure everything still works as expected?

@brianjhanson
Copy link
Contributor Author

@brandonkelly all look good to me

I checked

BaseElementSelectInput
ComponentSelectInput
CustomizeSourcesModal
CardsElementIndexView
ElementTableSorter
DataTableSorter
FieldLayoutDesigner

@brandonkelly brandonkelly merged commit e40f19e into 5.x Nov 12, 2025
3 checks passed
@brandonkelly brandonkelly deleted the bugfix/cms-17956-thumbnail-assets branch November 12, 2025 23:31
@brandonkelly
Copy link
Member

Craft 5.8.20 is out, which drastically improves drag-and-drop performance.

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.

[5.x]: Many thumbs in assets field very laggy when dragging

3 participants