11

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?

ketanbhatt
  • 898
  • 7
  • 19

1 Answers1

17

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.

Aaron Dufour
  • 17,288
  • 1
  • 47
  • 69
  • thankyou again @aaron. you've been really helpful in answering trello questions for the community. – Ankan-Zerob Apr 27 '15 at 06:46
  • 2
    @Aaron Dufour What is the ideal way? – Procedurally Generated Apr 01 '19 at 19:35
  • 1
    @ProcedurallyGenerated I haven't thought about this in awhile, but if you allow negative numbers you can put the first card at 0 and just add some constant buffer when adding to the bottom and subtract the same buffer when adding to the top, and then you only get stuck doing the spreading out when a bunch of things are inserted into the middle (this operation can be expensive on large lists, so having it be easy to trigger by just adding to the top of the list is a bit sad). – Aaron Dufour Apr 02 '19 at 00:53