如何利用SortableJS & jQuery获取嵌套列表的顺序

Question

我试图使用SortableJS & jQuery SortableJS结合创建嵌套列表，记录列表的新顺序，并通过console.log()记录其子级(类似于层次结构)。

我已经尝试过这个解决方案，它返回null。

这是我的代码，也是它的一个功能示例：

Javascript (使用Laravel的少量混合)：

@foreach($categories as $category)
$(document).ready(function() {
    var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable-{{$category->id}}'));
    // Loop through each nested sortable element
    for (var i = 0; i < nestedSortables.length; i++) {
        $([nestedSortables[i]]).sortable({
            group: 'nested',
            animation: 150,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            store: {
                set: function (sortable) {
                    var order = sortable.toArray();
                    //var catID = document.getElementById("sortable-cards-{{$category->id}}").getAttribute("data-catid");
                    const nestedQuery = '.nested-sortable-{{$category->id}}';
                    const identifier = 'boardId';
                    const parentId = 'parentId';
                    const boardName = 'boardName';
                    const root = document.getElementById('boardsList-{{$category->id}}');
                    function serialize(sortables) {
                        var serialized = [];
                        var children = [].slice.call(sortables.children);
                        for (var i in children) {
                            var nested = children[i].querySelector(nestedQuery);
                            serialized.push({
                                board_name: children[i].dataset[boardName],
                                board_id: children[i].dataset[identifier],
                                parent_id: children[i].dataset[parentId],
                                children: nested ? serialize(nested) : []
                            });
                        }
                        return serialized;
                    }
                    var child_order = serialize(root);
                    console.log(child_order);
                    console.log(order);
                }
            }
        });
    }
});
@endforeach

HTML (使用PHP的混合)：

<div id="boardsList" class="list-group nested-sortable">
   <div class="list-group nested-sortable">
       <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
           <div class="list-group nested-sortable">
               <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
                   <div class="list-group nested-sortable">
                   </div>
               </div>
           </div>
       </div>
       <div class="list-group nested-sortable">
           <div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
               <div class="list-group nested-sortable">
               </div>
           </div>
       </div>
   </div>
</div>

订单的console.log()输出：

​

而不是返回所有的订单结果。它只返回“克隆人战争”和“人员应用程序”的订单结果。我如何能够检索所有的结果(父母和孩子)？

谢谢你的帮助，如果你需要更多的信息，请告诉我。

Answer 1

嵌套排序示例

注意:在动画中使用嵌套排序时，建议将fallbackOnBody选项设置为true。还总是建议将invertSwap选项设置为true，或者swapThreshold选项低于默认值1(例如0.65)。

这个答案是这个https://stackoverflow.com/a/56589385/12232340的编辑版本。

因为jsbin中没有指定id，所以它返回null或不工作。

下面是演示：https://jsbin.com/kabetolanu/edit?js,output

​

var nestedSortables = [].slice.call(document.querySelectorAll('.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
 });
}
const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
  var serialized = [];
  var children = [].slice.call(sortable.children);
  for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
  id: children[i].dataset[identifier],
  children: nested ? serialize(nested) : []
});
  }
  return serialized;
}

console.log(serialize(root));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

</head>
<body>
<div id="sortableId" class="row">
<div id="nestedDemo" class="list-group col nested-sortable">
	<div data-sortable-id="1.1" class="list-group-item nested-1">Item 1.1
		<div class="list-group nested-sortable">
			<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
			<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2
				<div class="list-group nested-sortable">
					<div data-sortable-id="3.1" class="list-group-item nested-3">Item 3.1</div>
					<div data-sortable-id="3.2" class="list-group-item nested-3">Item 3.2</div>
					<div data-sortable-id="3.3" class="list-group-item nested-3">Item 3.3</div>
					<div data-sortable-id="3.4" class="list-group-item nested-3">Item 3.4</div>
				</div>
			</div>
			<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
			<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
		</div>
	</div>
	<div data-sortable-id="1.2" class="list-group-item nested-1">Item 1.2</div>
	<div data-sortable-id="1.3" class="list-group-item nested-1">Item 1.3</div>
	<div data-sortable-id="1.4" class="list-group-item nested-1">Item 1.4
		<div class="list-group nested-sortable">
			<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
			<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2</div>
			<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
			<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
		</div>
	</div>
	<div data-sortable-id="1.5" class="list-group-item nested-1">Item 1.5</div>
</div>
<div style="padding: 0" class="col-12">
</div>
</div>
  <script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>
</body>
</html>

​

这是另一个简单的嵌套解决方案https://github.com/SortableJS/Sortable/blob/master/tests/nested.html