Abrufen der Reihenfolge der ziehbaren Liste

Question

Ich bin ein komplett newby zu html, Javascript und d3, so entschuldige ich mich, wenn meine Frage vollständig offensichtlich ist.

Ich habe eine HTML-Liste

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

und was ich will in der Lage sein, um die Liste zu sortieren (indem Sie die Elemente zu ziehen) und dann die Liste aktuelle Reihenfolge in einem HTML-Spanne Feld Drucke, für Beispiel

[ "Artikel 3", "Punkt 4", "Artikel 2", "Punkt 1"]

Diese Informationen wird meine Datenquelle Art in einem D3 Diagramm nach fahren. Ich weiß, dass es wirklich einfach sein sollte, aber ...

Was ich versuchte, war die Verwendung der js "sortierbare" Skript von Rubaxa found here. Mit diesem Skript konnte ich die Liste ziehen und "sortieren", aber ich weiß einfach nicht, wie ich die Reihenfolge der Listen abrufen soll.

Jeder andere Vorschlag, wie Sie die Liste ziehen und sortieren und wie Sie die Reihenfolge abrufen, ist willkommen. Bitte denken Sie daran, dass ich total neu bin. Danke

Answer 1

Sie möchten wahrscheinlich einige Housekeeping mit Daten-Attribute zum Speichern von IDs.

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

Lassen Sie uns nun eine Funktion definieren, um den Auftrag CALC:

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

Nun, wenn Sie es getOrderOfData("simpleList") anrufen müssen und das Ergebnis verwenden. (ungetestet)