Trello如何处理卡片，列表，清单等的重新排列 [英] How does Trello handle rearrangement of cards, lists, checklists etc

问题描述

我正在制作一个必须列出可以重新排列的内容的应用程序.

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

Trello完美地完成了它，它使我们可以重新排列从列表到卡片和清单的所有内容.它是如何做到的?

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

我检查了它们在重新排列时进行的API调用，结果发现它们正在从前端发送密钥"pos".每次我重新布置卡时，该卡的ID都会用于具有更新的"pos"值的PUT请求.

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
}

我将其拖放到其他列表之前，对https://trello.com/1/lists/553750612a364775ded5f841进行了API调用，并发送了新的pos:32767.响应如下:

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
}

Trello做得如何?

How is Trello doing it?

推荐答案

为每个项目赋予一个pos(JavaScript数字，因此是双精度浮点数).然后，通过按pos排序来渲染它们.

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

添加新项目后，其pos取决于列表中的位置:

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

• 列表的底部-列表中当前最多的pos +一个缓冲区(我认为使用了1024)
• 列表顶部-当前列表中的最小pos除以二
• 列表中间-两个相邻项目的pos平均值

• 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

中间选项将由客户端分配；顶部/底部可以由客户端分配，也可以作为字符串"top"或"bottom"传递给服务器，在这种情况下，服务器将执行逻辑.

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.

在服务器上，如上所示将pos分配给新项目后，将根据最近的邻居检查该项目的邻接性-如果它们之间的距离小于最小距离(使用.01，我相信)，它们就会散开(可能会级联增加整个列表的pos.

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).

我认为这不是理想的方法，但是Trello就是这样做的.

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

这篇关于Trello如何处理卡片，列表，清单等的重新排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！