Получить порядок перетаскиваемого списка

Question

Я полный newby для 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, для пример

[ "пункт 3", "пункт 4", "пункт 2", "пункт 1"]

Эта информация будет вести мой вид источника данных в графе D3 после. Я знаю, что это должно быть очень просто, но ...

Что я пытался использовать js «Sortable» script rubaxa found here. С помощью этого сценария мне удалось перетащить и «отсортировать» список, но я просто не знаю, как получить порядок списка.

Любое другое предложение о том, как сделать список перетаскивания и сортировки и как получить заказ, приветствуется. Пожалуйста, имейте в виду, что я полный новичок. Спасибо

Answer 1

Возможно, вы захотите выполнить некоторую домашнюю работу, используя, например, атрибуты данных для хранения идентификаторов.

<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") и использовать результат. (непроверен)