What Changed
Prior to v20.2, the Sortable component obtained the dimensions of its items whenever an item was being dragged. In v20.2 and later, the dimensions are obtained when a user starts to drag an item and when they move it to another Sortable.
Reasons for Change
The new behavior increases performance in older browsers and with large numbers of Sortable items.
Impact on Existing Apps
This change affects only those applications that allow Sortable items to be updated during dragging (for example, if you use live updates or load new items on scrolling).
How to Update Existing Apps
Since the Sortable layout is no longer updated automatically, you need to update it manually. Call the Sortable's update() method after items are added or their dimensions are changed.
Depending on the framework, call the update() method in different places:
- jQuery - immediately after a markup update;
- React - in the useEffect hook or in the componentDidUpdate lifecycle method;
- Angular - in the ngAfterViewChecked hook;
- Vue - in the $nextTick lifecycle method.