fractional-indexing: Implementing Drag-and-Drop Ordering and Avoiding Index Collisions

Avoiding index collisions in sortable lists The limits of integer indices If you have ever built a drag-and-drop list, you have probably stored the order like this. [ { "id": "a", "order": 1 }, { "id": "b", "order": 2 }, { "id": "c", "order": 3 } ] What happens if you move b to the front? b becomes 0, and a is still 1, so at first glance it seems fine. But if you later want to insert a new item between a and b, you have to shift a to 2 and c to 3. In other words, changing one item often forces you to update several others too. In collaborative tools where multiple users can reorder items at the same time, that structure tends to create collisions. If two people modify the same part of the list concurrently, the final order can become inconsistent or trigger large update conflicts. What is fractional-indexing? David Greenspan introduced this approach in Implementing Fractional Indexing. The core idea is simple: instead of using integers for order, use sortable string keys. [ { "id": "a"