Enregistrer et réinitialiser l'ordre dans sortablejs

Question

J'utilise sortablejs pour créer une liste glisser + déposer. Je veux deux boutons, un qui affiche l' ordre actuel des éléments de la liste et un autre qui réinitialise simplement l'ordre actuel à son état d'origine .

J'ai trouvé quelques ressources sur la façon d' imprimer la commande actuelle et de la réinitialiser , mais comme je suis encore un peu novice en javascript, j'ai du mal à les implémenter.

Actuellement, mon alerte sort juste [object HTMLUListElement]et je ne peux pas comprendre la réinitialisation.

Code ci-dessous. Toute aide serait appréciée!

//Initiate sortable list
Sortable.create(simpleList, {
  animation: 150});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<!-- Simple List -->
<ul id="simpleList" class="list-group">
  <li data-id="i1" class="col-1">#1</li>
  <li data-id="i2" class="col-2">#2</li>
  <li data-id="i3" class="col-3">#3</li>
  <li data-id="i4" class="col-4">#4</li>
</ul>

<button type="button" onclick="alert($('#simpleList').toArray())">Current order!</button>
<button type="button" onclick="">Reset!</button>

</html>

Answer 1

Votre problème est dans cette ligne:

$('#simpleList').toArray()

La méthode .toArray () doit être appliquée à l'instance triable.

var simpleList = document.getElementById('simpleList');

// create sortable and save instance
var sortable = Sortable.create(simpleList, {animation: 150});

// save initial order
var initialOrder = sortable.toArray();

document.getElementById('saveCurrOrder').addEventListener('click', function(e) { 
    // print current order
    var order = sortable.toArray();
    console.log(order);
});

document.getElementById('resetOrder').addEventListener('click', function(e) {
    // reset to initial order
    sortable.sort(initialOrder);
})

<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>


<ul id="simpleList" class="list-group">
    <li data-id="i1" class="col-1">#1</li>
    <li data-id="i2" class="col-2">#2</li>
    <li data-id="i3" class="col-3">#3</li>
    <li data-id="i4" class="col-4">#4</li>
</ul>

<button type="button" id="saveCurrOrder">Current order!</button>
<button type="button" id="resetOrder">Reset!</button>