Question

我是html，javascript和d3的完全新手，所以如果我的问题非常明显，我会道歉。

我有一个HTML列表

 <div id="simpleList" class="list-group">
    <div class="list-group-item">item 1</div>
    <div class="list-group-item">item 2</div>
    <div class="list-group-item">item 3</div>
    <div class="list-group-item">item 4</div>
  </div>

我想要的是能够对列表进行排序（例如通过拖动项目），然后在html span字段中打印列表当前顺序，例如

[“第3项”，“第4项”，“第2项”，“第1项”]

此信息将在D3图表之后驱动我的数据源排序。我知道它应该很简单但是......

我尝试的是使用rubaxa found here的js“可排序”脚本。使用此脚本，我能够拖动并“排序”列表，但我只是不知道如何检索列表顺序。

欢迎任何其他有关如何执行拖动和排序列表以及如何检索订单的建议。请记住，我是一个全新的。感谢

Answer 1

您可能希望使用例如数据属性来存储ID进行一些内务管理。

  <div id="simpleList" class="list-group">
    <div class="list-group-item" data-myId="item1">actual content</div>
    <div class="list-group-item" data-myId="item2">actual content</div>
    <div class="list-group-item" data-myId="item3">actual content</div>
    <div class="list-group-item" data-myId="item4">actual content</div>
  </div>

现在让我们定义一个计算订单的函数：

function getOrderOfData(listId){

    //get the list
    var list = document.getElementById(listId);

    //and iterate the children in order. Get the myId property and add (in order)
    //to array.
    var orderArray = [];
    var childs = list.children;
    for(var i=0; i< childs.length; i++){
      var child = childs[i];
      orderArray.push(child.dataset.myId);
    }

    return orderArray;

    //NOTE: the native map probably doesn't work on list.children
    //since children is not a proper array. 
    // Instead using lodash as suggested, e.g. _.map(list.children, ...) 
    //will do things without having to worry about it. 
    //
    //OLD CODE
    //alternative which is nicer / more terse: 
    // return list.children.map(function(child){
    //  return child.dataset.myId;
    // });

    // //and using ES6
    // return list.children.map((child) => child.dataset.myId);
}

现在，无论何时需要，请致电getOrderOfData("simpleList")并使用结果。（另）

检索可拖动列表的顺序

1 个答案: