在sortablejs中保存和重置订单

如何解决在sortablejs中保存和重置订单

我正在使用sortablejs创建一个拖放列表。我想要两个按钮，一个按钮输出列表元素的当前顺序，另一个按钮将重置当前顺序回到其原始状态。

我找到了有关如何使用print the current order和如何使用reset it的一些资源，但是由于我对javascript还是有些陌生，因此在实现它们方面遇到了麻烦。

当前，我的警报仅输出[object HTMLUListElement]，我无法弄清重置。

下面的代码。任何帮助将不胜感激！

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

解决方法

您的问题在以下一行：

$('#simpleList').toArray()

方法 .toArray（）需要应用于可排序的实例。

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>