Javascript 持续排序

我正在使用ReactJS构建一个web应用程序，在持久排序方面遇到了困难。该应用程序仅供公司使用，本质上是一个员工任务管理器（类似于）。它管理6名员工，每个员工有一列，任务在垂直列表中沿着该列运行

其思想是允许对任务进行拖放排序，然后将任务同步到服务器（使用），并对所有正在运行的应用程序进行更改。我已经构建了UI，每个功能（添加、编辑、删除等）都是功能性的，但我不知道如何进行排序

我正在构建每个任务，如下所示：

var tasks = this.props.tasks.map(function(task) {
  if(!task.archive) {
    return <Task key={task.id} id={task.id} ...more props />
  }
});

var tasks=this.props.tasks.map（函数（任务）{
如果（！task.archive）{
返回
}
});

然后，我只需在Render函数中调用

{tasks}

即可输出html

我发现了一个有趣的插件，它启用了拖放功能，但是我需要一些关于如何使这个持久化的想法。我试图捕获数组中任务ID的顺序，然后对返回的映射数据进行排序，但没有成功

我怎样才能完成这项任务？我是一个比较新的学生

谢谢

React.14/DragAndDrop中有一个例子。这里有一些

let list=[
{id:'l1'，标签：'列表的第一行'}，
{id:'l2'，标签：'列表的第二行'}，
{id:'l3'，标签：'列表的第三行'}，
{id:'l4'，标签：'列表的第四行'}，
{id:'l5'，标签：'列表的第五行'}，
{id:'l6'，标签：'列表的第六行'}，
{id:'l7'，标签：'seven of list'}，
{id:'l8'，标签：'列表的第八行'}，
{id:'l9'，标签：'list的第九行'}，
{id:'l10'，标签：'list的第十行'}，
{id:'l11'，标签：'列表的第十一行'}，
{id:'l12'，标签：'tweelth of list'}，
{id:'l13'，标签：'列表的第十三行'}，
{id:'l14'，标签：'列表的第十四行'}，
{id:'l15'，标签：'列表的第十五行'}
]
类DndCrlRender扩展了React.Component{
render（）{
让isMobile=this.props.isMobile；
返回(
);
}
}
导出默认类DndCtrl扩展DNDCTRLENDER{
构造函数（）{
超级（）；
this.state={list:_ld.cloneDeep（list）}；
this.savedItemID=''；
}
dndDone=（startID，endID）=>{
让newList=this.state.list；
让startObj=\uld.findWhere（newList，{id:startID}）；
设startIndex=\uld.indexOf（newList，startObj）；
新列表拼接（startIndex，1）；
让endObj=\uld.findWhere（newList，{id:endID}）；
设endIndex=_ld.indexOf（newList，endObj）+1；
新列表拼接（endIndex，0，startObj）；
this.setState.list=newList；
}
}