javascript – Trello如何处理卡片,清单,清单等的重新排列

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

Trello完美地完成它,它允许我们重新排列所有内容,从列表到卡片和清单.它是如何做到的？

我检查了他们在重新排列时发出的API调用,结果发现他们正在从前端发送一个键“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是如何做到的？

解决方法:

每个项目都有一个pos(一个JavaScript编号,所以双精度浮点数).然后,它们通过按pos排序来呈现.

添加新项目时,它的位置取决于列表中的位置：

>列表底部 – 列表中当前最大位置缓冲区(我认为使用的是1024)
>列表顶部 – 列表中当前的最小位数除以2
>列表中间 – 两个相邻项的pos的平均值

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

在服务器上,如上所示将pos分配给新项目后,将检查该项目与其最近邻居的邻接关系 – 如果它们之间的距离小于最小距离(我相信使用.01),则它们会展开(可能级联到增加整个列表的位置).

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

标签：trello,javascript,mongodb
来源： https://codeday.me/bug/20190728/1558986.html