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

Question

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

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

这些项目是根据它们在 UI 上的名称填充的。示例：1 2 3 4 5

我已经实现了 jQuery 的排序。我不想创建新数组，而是希望在用户对上述元素执行拖放操作后根据元素的新位置更新现有数组 arr。

用户可以移动数组 arr 中存在的元素，并且不能从 1 2 3 4 5 元素列表外部引入任何拖动的对象，例如：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>

jQuery:

 $(function() {
            var data = $(".tree-list").sortable({
              delay: 150,
              axis: "y",
      
            update: function(event, ui) {
                var index = ui.item.index();
                console.log("Moved to new position: " + index);
                var children = $('ul.tree-list').children()
                // What to do here
           
            })
     
            $( ".tree-list" ).disableSelection();
        });

动态创建的数组：

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

}

Answer 1

我尝试使用初始数组重新创建您的示例：

我所做的是，首先创建 data-previndex 以使用 start srotable 存储 li 位置更新的先前索引：（归功于此 answer ）

然后每次更新，调用 array_move（记入此 answer），根据之前和当前索引

更新 js 数组上的元素

请参阅下面的工作片段：

$(function() {
  let arr = [{name:1,data:"xyz"}, {name:2,data:"abc"}, {name:3, data:"lmn"}, {name:4,data:"opq"}, {name:5,data:"stu"}]
  
  let $treeList = $(".tree-list");
  
  arr.forEach(element => {
    let liNode = `<li class="li_class"><span class="span_class"> ${element.name} </span></li>`
    $treeList.append(liNode);
  })
   
  var data = $(".tree-list").sortable({
    delay: 150,
    axis: "y",
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        // credits to this answer 
        $(this).attr('data-previndex', ui.item.index());
    },

    update: function(event, ui) {
      var newIndex = ui.item.index();
      var oldIndex = $(this).attr('data-previndex');
      
      
      var children = $('ul.tree-list').children()
      // What to do here
      arr = array_move(arr, oldIndex, newIndex);
      console.clear()
      console.log(JSON.stringify(arr));
    }
  });

  $(".tree-list").disableSelection();
});

function array_move(arr, old_index, new_index) {
    if (new_index >= arr.length) {
        var k = new_index - arr.length + 1;
        while (k--) {
            arr.push(undefined);
        }
    }
    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
    return arr; 
};

@import url("https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul class="tree-list">
</ul>

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

Sortable - Update Existing Array - jQuery

html

javascript

jquery

jquery-ui

jquery-ui-sortable