How does Trello handle rearrangement of cards, lists, checklists etc

Question

I am making an app that will have to list of things which can be rearranged.

Trello does it perfectly, it allows us to rearrange everything, from lists to cards and checklists. How does it do it?

I checked the API calls they make while rearranging, turns out they are sending a key "pos" from the frontend. Everytime I rearrange a card, the ID of that card is used for a PUT request with and updated "pos" value.

Here is a list before rearranging:

{
    "id": "553750612a364775ded5f841",
    "name": "test again",
    "closed": false,
    "idBoard": "55374f01f73ace7afec03698",
    "pos": 131071
}

I drag and drop it before some other list, an API call to https://trello.com/1/lists/553750612a364775ded5f841 is made and a new pos:32767 is sent. The response comes as:

{
    "id": "553750612a364775ded5f841",
    "name": "test again",
    "closed": false,
    "idBoard": "55374f01f73ace7afec03698",
    "pos": 32767.5
}

How is Trello doing it?

Answer 1

Each item is given a pos (a JavaScript number, so double-precision float). Then, they are rendered by sorting by pos.

When a new item is added, it's pos is based on where in the list it is:

• bottom of list - maximum pos currently in the list + a buffer (I think 1024 is used)
• top of list - minimum pos currently in the list divided by two
• middle of list - average of pos of the two adjacent items

The middle option would be assigned by the client; the top/bottom can either be assigned by the client or passed to the server as the strings "top" or "bottom" in which case the server will perform the logic.

On the server, after assigning the pos to the new item as shown above, the item is checked against its nearest neighbors for adjacency - if they are less than a minimum distance apart (.01 is used, I believe), they are spread out (potentially cascading into increasing the pos of the entire list).

I don't think this is the ideal way, but it is how Trello does it.