文章/答案/技术大牛

发布

社区首页 >问答首页 >在sortablejs中保存和重置顺序

问在sortablejs中保存和重置顺序
EN

Stack Overflow用户

提问于 2020-08-24 22:02:26

回答 1查看 1.7K关注 0票数 3

我正在使用sortablejs创建一个drag+drop列表。我想要两个按钮，一个输出列表元素的当前顺序，另一个只是将当前顺序重置回原来的状态。

我找到了一些关于如何使用打印当前订单和如何使用重设的资源，但是由于我对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>

javascript

sortablejs

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-24 22:29:04

你的问题就在这一行：

$('#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>

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63569279

复制

相似问题

问在sortablejs中保存和重置顺序
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在sortablejs中保存和重置顺序EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在sortablejs中保存和重置顺序
EN