我尝试获取可以订购的嵌套列表的顺序可排序JS https://github.com/SortableJS/Sortable。
我的清单如下所示:
<div id="nestedDemo" class="list-group col nested-sortable">
<div class="list-group-item" data-id="1">Titel 1</div>
<div class="list-group-item" data-id="2">Titel 2</div>
<div class="list-group-item" data-id="3">Titel3
<div class="list-group nested-sortable">
<div class="list-group-item" data-id="4">Titel 4</div>
<div class="list-group-item" data-id="5">Titel 5</div>
<div class="list-group-item" data-id="6">Titel 6</div>
</div>
</div>
<div class="list-group-item" data-id="7">Titel 7</div>
<div class="list-group-item" data-id="8">Titel 8</div>
<div class="list-group-item" data-id="9">Titel 9</div>
<div class="list-group-item" data-id="10">Titel10
<div class="list-group nested-sortable">
<div class="list-group-item" data-id="11">Titel 11</div>
<div class="list-group-item" data-id="12">Titel 12</div>
</div>
</div>
</div>
和我的 JavaScript 代码:
<script>
$(document).ready(function() {
var nestedSortables = $(".nested-sortable");
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
onSort: function (e) {
var items = e.to.children;
var result = [];
for (var i = 0; i < items.length; i++) {
result.push($(items[i]).data('id'));
}
$('#standard_order').val(result);
}
});
}
});
</script>
我的目标是通过列表的每次更改来获取订单,并将订单存储在带有 id 的输入字段中standard_order
。我这样做是因为我有一个提交按钮将订单存储在数据库中。
我的问题是,当我更改顺序时,完整列表不会存储在我的输入字段中,而是仅存储我删除当前元素的子列表。
我尝试使用一个列表,但嵌套列表不起作用..
你能帮我解决我的问题吗?
Edit:
我想我有一个通用的解决方案。
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
var sortables = [];
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
sortables[i] = new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
$('#sendButton').click(function () {
for(var y = 0; y < sortables.length; y++) {
var order = sortables[y].toArray();
console.log(order);
}
});
这给了我每个的顺序div
与班级nested-sortable
当我点击带有 id 的按钮时sendButton
。
例如控制台输出如下所示:
(7) ["Titel 1", "Titel 2", "Titel 3", "Titel 7", "Titel 8", "Titel 8", "Titel 10"]
(3) ["Titel 4", "Titel 5", "Titel 6"]
(2) ["Titel 11", "Titel 12"]
但我不知道如何获得分层嵌套结构...我看不到 div 的父级是什么。