Javascript 可排序-更新现有数组-jQuery

我有一个现有的元素数组，例如：

arr=[{name:1，data:xyz}，{name:2，data:abc}，{name:3，data:lmn}；{name:4，data:opq}]

这些项目根据其在UI上的名称填充。 示例：

12345

我已经实现了jQuery的可排序功能。我希望在用户对上述元素执行拖放操作后，根据元素的新位置更新现有数组

arr

，而不是创建新数组

用户可以移动数组

arr

内的元素，并且不能从

12345

元素列表外引入任何拖动的对象，例如：2可以移动到5，1可以移动到3等等

元素HTML:

<ul class= "tree-list">
 <li class="li_class"><span class="span_class"> 1 </span></li>
 <li class="li_class"><span class="span_class"> 2 </span></li>
 <li class="li_class"><span class="span_class"> 3 </span></li>
 <li class="li_class"><span class="span_class"> 4 </span></li>
 <li class="li_class"><span class="span_class"> 5 </span></li>
</ul>

动态创建的数组：

someFunc(data){
    let htmlString= " <ul class =\"tree-list\" "
    for (let i=0; i<data.length; i++){
        if(typeof(item) === "string"){
          htmlString += "<li class=\" li_class \"" + item + "\">";
                                     }
        else if(typeof(item) === "object"){
          htmlString += "<li>";
          htmlString += "span class=\"span_class\""  
                                     }
           htmlString += "</li>"
                                   }
       }
htmlString += "</ul>";
return (htmlString);

}

someFunc（数据）{
让htmlString=“我尝试使用初始数组重新创建您的示例：

我所做的是，首先创建
数据previndex
，使用start srotable在li位置更新上存储以前的索引：（此项的积分）

然后，每次更新时，调用
数组\u move
（归功于此），根据之前和当前索引更新js数组中的元素

请参见下面的工作代码段：


$（函数（）{
设arr=[{name:1，数据：“xyz”}，{name:2，数据：“abc”}，{name:3，数据：“lmn”}，{name:4，数据：“opq”}，{name:5，数据：“stu”}]
让$treeList=$（“.tree list”）；
arr.forEach（元素=>{
让liNode=`
${element.name}
`
$treeList.append（liNode）；
})
变量数据=$（“.tree list”）.sortable({
延误：150，
轴：“y”，
开始：功能（e、ui）{
//在具有旧索引的元素上创建临时属性
//这个答案值得称赞https://stackoverflow.com/questions/1601827/jquery-ui-sortable-how-to-determine-current-location-and-new-location-in-update
$（this.attr（'data-previndex'，ui.item.index（））；
},
更新：功能（事件、用户界面）{
var newIndex=ui.item.index（）；
var oldIndex=$（this.attr（'data-previndex'）；
var children=$（'ul.tree list'）.children（）
//在这里做什么
arr=数组移动（arr、oldIndex、newIndex）；
控制台清除（）
log（JSON.stringify（arr））；
}
});
$（“.tree list”）.disableSelection（）；
});
函数数组移动（arr、旧索引、新索引）{
如果（新索引>=arr.length）{
var k=新的_指数-arr.length+1；
而（k--）{
arr.push（未定义）；
}
}
arr.splice（新的_索引，0，arr.splice（旧的_索引，1）[0]）；
返回arr；
}；
@导入url（“https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css”；


是从数组中创建的
li
和
span
元素吗？如果是这样，您可以通过将对象添加到元素的元数据并简单地使用
map（）来简化逻辑
在每次排序操作发生时，以正确的顺序重新构建数组。是的，它们是动态创建的。请查看更新的代码。
someFunc(data){
    let htmlString= " <ul class =\"tree-list\" "
    for (let i=0; i<data.length; i++){
        if(typeof(item) === "string"){
          htmlString += "<li class=\" li_class \"" + item + "\">";
                                     }
        else if(typeof(item) === "object"){
          htmlString += "<li>";
          htmlString += "span class=\"span_class\""  
                                     }
           htmlString += "</li>"
                                   }
       }
htmlString += "</ul>";
return (htmlString);

}