javascript - Trello 如何处理卡片、列表、 list 等的重新排列

Question

我正在制作一个必须列出可以重新排列的事物的应用程序。

Trello 做得很完美，它允许我们重新排列一切，从列表到卡片和 list 。它是如何做到的？

我检查了他们在重新排列时进行的 API 调用，结果发现他们从前端发送了一个 key “pos”。每次我重新排列卡片时，该卡片的 ID 都会用于 PUT 请求并更新“pos”值。

这是重新排列前的列表:

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

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

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

Trello 是如何做到的？

Answer 1

每个项目都有一个 pos(一个 JavaScript 数字，所以是 double float )。然后，它们通过按 pos 排序呈现。

添加新项目时，它的位置基于它在列表中的位置:

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

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

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

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